/**
 * variables.css — every design token on the site.
 *
 * Nothing below this file in the cascade may invent a colour, size or timing.
 * Responsive behaviour redeclares tokens inside the media queries at the
 * bottom; it never restyles a component.
 *
 * Source: Insight Care brand kit (colour system + typography) and the approved
 * home page design, measured at a 1728px artboard.
 */

:root {

	/* ==================================================================
	 * 1. Brand colour system
	 * ============================================================== */

	--deep-teal: #0F4D4B;   /* Insight. Trust. Calm.            */
	--navy: #1E2A39;        /* Structure. Reliability.          */
	--sage: #8FA68E;        /* Care. Wellbeing.                 */
	--warm-stone: #D8CEC1;  /* Humanity. Dignity. Warmth.       */
	--charcoal: #2D333B;    /* Clarity. Maturity.               */
	--ochre: #C99A4A;       /* Warmth. Energy. Use sparingly.   */

	/* Working tints and shades derived from the six above. */
	--teal-900: #072E2C;
	--teal-800: #0B3A38;
	--teal-700: var(--deep-teal);
	--teal-600: #15605C;
	--teal-500: #1E5F5C;
	--teal-300: #7FB0AD;
	--teal-100: #E4EEEC;
	--teal-050: #F2F8F7;

	--ochre-700: #A87B32;
	--ochre-600: #CD8C2B;   /* Icon weight used in the approved design. */
	--ochre-500: var(--ochre);
	--ochre-200: #F0DCB8;
	--ochre-100: #F7EEDC;

	--sage-300: #A9BCA8;
	--sage-100: #EDF2EC;

	--stone-300: #C8BBA9;
	--stone-200: var(--warm-stone);
	--stone-100: #F3EEE8;

	/* Neutrals. */
	--white: #FFFFFF;
	--cream: #F6F3EE;       /* Alternating section background.  */
	--off-white: #FAF9F7;
	--line: #E6E0D6;        /* Hairlines on cream.              */
	--line-cool: #E2E4E7;   /* Hairlines on white.              */
	--ink: #111111;         /* Headlines on light.              */
	--body-text: #3A3F47;   /* Paragraphs.                      */
	--muted: #6B7178;
	--black: #000000;

	/* Status. */
	--success: #2E7D32;
	--warning: #B8762A;
	--error: #B3261E;

	/* ==================================================================
	 * 2. Semantic colour roles — components reference these, not the
	 *    brand names above, so a palette change stays a one-line edit.
	 * ============================================================== */

	--bg: var(--white);
	--bg-alt: var(--cream);
	--bg-dark: var(--deep-teal);
	--bg-tint: var(--teal-100);
	--bg-accent: var(--ochre-100);

	--text: var(--ink);
	--text-body: var(--body-text);
	--text-muted: var(--muted);
	--text-on-dark: var(--white);
	--text-on-dark-soft: rgba(255, 255, 255, .84);
	--text-accent: var(--ochre);
	--text-heading: var(--ink);
	--text-heading-alt: var(--navy);

	--border: var(--line);
	--border-strong: var(--stone-300);
	--border-dark: rgba(255, 255, 255, .18);

	--link: var(--deep-teal);
	--link-hover: var(--ochre-700);

	--focus-ring: var(--ochre-600);

	/* ==================================================================
	 * 3. Typography
	 *
	 * The brand kit names Inter as the approved typeface; the approved
	 * home page design is set in Outfit for headings and DM Sans for
	 * body. Both families are self-hosted in assets/fonts. To move the
	 * site to Inter, change these two tokens only.
	 * ============================================================== */

	--font-display: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Weights, mapped to the brand kit's typography ladder. */
	--fw-regular: 400;   /* Body copy                 */
	--fw-medium: 500;    /* CTAs and key information  */
	--fw-semibold: 600;  /* Section headings          */
	--fw-bold: 700;      /* Major headlines           */

	/* Sizes. Fluid between a 390px phone and the 1728px artboard. */
	--fs-display: clamp(2.5rem, 1.05rem + 4.6vw, 4.625rem);   /*  40 → 74 */
	--fs-h1: clamp(2.25rem, 1.15rem + 3.5vw, 3.75rem);        /*  36 → 60 */
	--fs-h2: clamp(1.875rem, 1.1rem + 2.5vw, 3.375rem);       /*  30 → 54 */
	--fs-h3: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);         /*  24 → 36 */
	--fs-h4: clamp(1.3125rem, 1.1rem + 0.7vw, 1.6875rem);     /*  21 → 27 */
	--fs-h5: clamp(1.1875rem, 1.07rem + 0.4vw, 1.5rem);       /*  19 → 24 */
	--fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.375rem);  /*  17 → 22 */
	--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);       /*  16 → 18 */
	--fs-small: 1.0625rem;                                     /*  17      */
	--fs-xs: 0.9375rem;                                        /*  15      */
	--fs-label: 0.875rem;                                      /*  14      */
	--fs-stat: clamp(3rem, 1.6rem + 4.4vw, 5.75rem);          /*  48 → 92 */
	--fs-stat-sm: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);       /*  36 → 64 */

	/* Line heights. */
	--lh-display: 1.1;
	--lh-heading: 1.15;
	--lh-subheading: 1.3;
	--lh-lead: 1.45;
	--lh-body: 1.55;
	--lh-tight: 1.2;

	/* Letter spacing. */
	--ls-display: -0.02em;
	--ls-heading: -0.01em;
	--ls-body: 0;
	--ls-label: 0.18em;   /* Uppercase eyebrow labels. */
	--ls-button: 0;

	/* ==================================================================
	 * 4. Spacing scale
	 * ============================================================== */

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 56px;
	--space-11: 64px;
	--space-12: 80px;
	--space-13: 96px;
	--space-14: 120px;
	--space-15: 160px;

	/* Vertical rhythm for a full-width section. */
	--section-y: clamp(64px, 7vw, 120px);
	--section-y-sm: clamp(48px, 5vw, 80px);
	--section-y-lg: clamp(80px, 9vw, 160px);

	/* Gaps. */
	--gap-card: 28px;
	--gap-grid: 24px;
	--gap-inline: 16px;

	/* ==================================================================
	 * 5. Layout
	 * ============================================================== */

	--container: 1552px;       /* Content width in the 1728px artboard. */
	--container-narrow: 1180px;
	--container-text: 820px;   /* Comfortable reading measure.          */
	--gutter: clamp(20px, 4vw, 88px);

	--header-h: 120px;         /* Must stay taller than the logo (84px). */
	--header-h-scrolled: 84px;
	--header-h-mobile: 76px;

	--grid-2: repeat(2, minmax(0, 1fr));
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr));

	/* ==================================================================
	 * 6. Radii, borders and shape
	 * ============================================================== */

	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-card: 18px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;
	--radius-circle: 50%;

	/* The hero and feature images use an organic, lozenge-like mask. */
	--radius-organic: 180px 28px 180px 28px;
	--radius-organic-alt: 28px 180px 28px 180px;

	--border-w: 1px;
	--border-w-strong: 1.5px;

	/* ==================================================================
	 * 7. Elevation
	 * ============================================================== */

	--shadow-xs: 0 1px 2px rgba(17, 17, 17, .04);
	--shadow-sm: 0 2px 8px rgba(17, 17, 17, .05);
	--shadow-md: 0 8px 24px rgba(15, 77, 75, .08);
	--shadow-lg: 0 20px 50px rgba(15, 77, 75, .12);
	--shadow-header: 0 1px 0 rgba(17, 17, 17, .06);

	/* ==================================================================
	 * 8. Motion
	 * ============================================================== */

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, .05, .36, 1);
	--ease-soft: cubic-bezier(.25, .46, .45, .94);

	--dur-fast: 150ms;
	--dur-base: 280ms;
	--dur-slow: 600ms;
	--dur-reveal: 900ms;

	--reveal-distance: 28px;
	--reveal-stagger: 90ms;

	/* ==================================================================
	 * 9. Components
	 * ============================================================== */

	/* Buttons — square corners, as drawn. */
	--btn-h: 66px;
	--btn-h-sm: 52px;
	--btn-px: 24px;
	--btn-gap: 10px;
	--btn-radius: 0px;
	--btn-fs: 1.25rem;        /* 20px */
	--btn-fs-sm: 1rem;        /* 16px */
	--btn-fw: var(--fw-medium);

	/* Eyebrow pill. */
	--pill-h: 48px;
	--pill-px: 22px;
	--pill-fs: 1.125rem;      /* 18px */

	/* Cards. */
	--card-pad: clamp(24px, 2.4vw, 40px);
	--card-radius: var(--radius-card);
	--card-bg: var(--white);
	--card-border: var(--line);

	/* Forms. */
	--field-h: 58px;
	--field-radius: var(--radius-sm);
	--field-border: #D5CFC5;
	--field-bg: var(--white);
	--field-fs: 1.0625rem;    /* 17px */

	/* Icons. */
	--icon-sm: 18px;
	--icon-md: 24px;
	--icon-lg: 32px;
	--icon-chip: 56px;        /* Circular icon backing.     */
	--icon-chip-lg: 68px;

	/* ==================================================================
	 * 10. Stacking
	 * ============================================================== */

	--z-base: 1;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 200;
	--z-drawer: 300;
	--z-overlay: 400;
	--z-modal: 500;
	--z-toast: 600;
}

/* ======================================================================
 * Responsive — redeclare tokens only.
 * =================================================================== */

@media (max-width: 1200px) {
	:root {
		--container: 100%;
		--gap-card: 20px;
		--header-h: 96px;
	}
}

@media (max-width: 900px) {
	:root {
		--header-h: var(--header-h-mobile);
		--header-h-scrolled: var(--header-h-mobile);
		--btn-h: 56px;
		--btn-fs: 1.0625rem;
		--pill-h: 42px;
		--pill-fs: 1rem;
		--card-pad: 24px;
		--gap-grid: 16px;
		--radius-organic: 110px 20px 110px 20px;
		--radius-organic-alt: 20px 110px 20px 110px;
	}
}

@media (max-width: 600px) {
	:root {
		--gap-card: 16px;
		--field-h: 52px;
		--icon-chip: 48px;
		--icon-chip-lg: 56px;
		--reveal-distance: 18px;
	}
}

/* Honour the operating system's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-reveal: 0ms;
		--reveal-distance: 0px;
		--reveal-stagger: 0ms;
	}
}