/* ===========================================================================
   Vitrak Extendreach — design tokens
   ---------------------------------------------------------------------------
   One source of truth for colour, type, space, motion and elevation.

   Brand constants (the teal dot-pyramid and the marigold apex from the Vitrak
   mark) never change between themes — they ARE the identity. Everything a
   component actually consumes is a *semantic* token (--bg-surface,
   --text-secondary, --border-color …) which is re-pointed under
   [data-theme="dark"]. Components must never reach for a raw brand value to
   express a surface or a piece of text; that is what makes both themes
   deliberate rather than inverted.

   Base :root holds the LIGHT theme so the page is legible even if the theme
   script never runs.
   =========================================================================== */

:root {
  /* ---- brand constants ------------------------------------------------ */
  /* Sampled from the logo: dots #0AB297, apex #FEC62C. */
  --brand-teal: #0ab297;
  --brand-teal-bright: #16d9b4; /* glow / dark-mode emphasis  */
  --brand-teal-deep: #00705f; /* AA on every light surface, incl. --bg-sunken */
  --brand-teal-darker: #04564a;
  --brand-gold: #ffc62e;
  --brand-gold-bright: #ffd76b;
  --brand-gold-deep: #8f6700; /* AA on every light surface */
  --brand-ink: #04100e;

  /* Gradients built from the brand pair. Used sparingly — a gradient should
     mark the one thing that matters in a section, not decorate everything. */
  --grad-brand: linear-gradient(120deg, var(--brand-teal) 0%, #12c9a8 45%, #37e0c0 100%);
  --grad-brand-gold: linear-gradient(115deg, var(--brand-teal) 0%, #4fd6b4 55%, var(--brand-gold) 130%);
  /* Monochrome teal. An earlier version ran to --brand-gold-deep and the tail
     of the headline turned brown; gold stays an accent, not a text ramp. */
  --grad-text: linear-gradient(100deg, #046b5b 0%, #00937d 45%, #16b89b 100%);

  /* ---- semantic colour — LIGHT ---------------------------------------- */
  /* Off-white with a mint undertone rather than #fff, so white cards read as
     genuinely elevated instead of merging with the page. */
  --bg-page: #f4f8f7;
  --bg-page-alt: #eaf2f0;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #e6efed;
  --bg-inverse: #04100e; /* dark bands inside the light theme */
  --bg-brand-subtle: #e2f4ef;
  --bg-gold-subtle: #fdf3d9;

  /* Every value below is checked against the four light surfaces
     (--bg-page, --bg-page-alt, --bg-surface, --bg-sunken) at WCAG AA for
     normal text. --text-muted in particular is not decorative: it carries
     breadcrumbs, field hints and the "illustrative" notes. */
  --text-primary: #06201c;
  --text-secondary: #3f5c57;
  --text-muted: #567370;
  --text-inverse: #ffffff;
  --text-on-brand: #04100e; /* on a solid teal or gold fill */

  --color-primary: var(--brand-teal-deep); /* links, small text accents  */
  --color-primary-fill: var(--brand-teal); /* solid fills, marks, bars   */
  --color-accent: var(--brand-gold);
  --color-accent-text: var(--brand-gold-deep);

  --border-color: #d5e3e0;
  --border-strong: #b6ccc7;
  --border-brand: rgba(10, 178, 151, 0.32);

  --shadow-sm: 0 1px 2px rgba(6, 32, 28, 0.06), 0 2px 6px rgba(6, 32, 28, 0.04);
  --shadow-md: 0 4px 10px rgba(6, 32, 28, 0.06), 0 14px 32px -12px rgba(6, 32, 28, 0.14);
  --shadow-lg: 0 8px 20px rgba(6, 32, 28, 0.07), 0 32px 64px -24px rgba(6, 32, 28, 0.2);
  --shadow-brand: 0 12px 32px -12px rgba(10, 178, 151, 0.45);

  /* Ambient washes painted behind hero / CTA sections. */
  --glow-a: rgba(10, 178, 151, 0.1);
  --glow-b: rgba(255, 198, 46, 0.09);
  --glow-c: rgba(24, 160, 200, 0.07);
  --dot-color: rgba(10, 178, 151, 0.22); /* dot textures */
  --dot-color-faint: rgba(6, 32, 28, 0.07);
  --scrim: rgba(6, 32, 28, 0.45);

  /* Glass panels. Light mode leans opaque — heavy blur over a pale page just
     looks smudged. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-blur: 14px;

  --header-bg: rgba(244, 248, 247, 0.82);
  --header-border: rgba(6, 32, 28, 0.08);

  /* Line-art illustrations ship as black strokes on transparent; this filter
     tints them per theme instead of shipping two copies of each file. */
  --lineart-filter: invert(58%) sepia(28%) saturate(760%) hue-rotate(122deg) brightness(93%) contrast(89%);
  --lineart-opacity: 0.34;
  --map-filter: opacity(1.7) saturate(1.1);

  color-scheme: light;
}

[data-theme='dark'] {
  /* ---- semantic colour — DARK ----------------------------------------- */
  /* Near-black carrying the brand's green undertone, not neutral grey. Each
     surface step is a real lift in luminance so elevation reads without
     borders doing all the work. */
  --bg-page: #050f0e;
  --bg-page-alt: #081615;
  --bg-surface: #0c1c1a;
  --bg-elevated: #122523;
  --bg-sunken: #030a09;
  --bg-inverse: #f4f8f7;
  --bg-brand-subtle: rgba(10, 178, 151, 0.11);
  --bg-gold-subtle: rgba(255, 198, 46, 0.12);

  --text-primary: #eaf5f2;
  --text-secondary: #a3bdb8;
  --text-muted: #708b86;
  --text-inverse: #06201c;
  --text-on-brand: #04100e;

  --color-primary: var(--brand-teal-bright);
  --color-primary-fill: var(--brand-teal);
  --color-accent: var(--brand-gold);
  --color-accent-text: var(--brand-gold);

  --border-color: rgba(150, 220, 208, 0.14);
  --border-strong: rgba(150, 220, 208, 0.26);
  --border-brand: rgba(22, 217, 180, 0.4);

  /* Shadows alone are invisible on near-black, so elevation is carried by the
     surface ramp above plus a faint brand-tinted halo. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --shadow-brand: 0 16px 44px -16px rgba(10, 178, 151, 0.4);

  --glow-a: rgba(10, 178, 151, 0.16);
  --glow-b: rgba(255, 198, 46, 0.08);
  --glow-c: rgba(30, 130, 190, 0.12);
  --dot-color: rgba(22, 217, 180, 0.34);
  --dot-color-faint: rgba(150, 220, 208, 0.09);
  --scrim: rgba(0, 0, 0, 0.6);

  --glass-bg: rgba(12, 28, 26, 0.6);
  --glass-border: rgba(150, 220, 208, 0.16);
  --glass-blur: 18px;

  --header-bg: rgba(5, 15, 14, 0.78);
  --header-border: rgba(150, 220, 208, 0.12);

  --grad-text: linear-gradient(100deg, #6ff0d4 0%, #22ddb8 50%, #0fb99b 100%);

  --lineart-filter: invert(74%) sepia(46%) saturate(480%) hue-rotate(122deg) brightness(95%) contrast(90%);
  --lineart-opacity: 0.3;
  /* Same silhouette, pushed harder: at 10% alpha it is invisible on
     near-black, so the alpha is tripled and the hue brightened. */
  --map-filter: opacity(3.2) saturate(1.35) brightness(1.25);

  color-scheme: dark;
}

/* ===========================================================================
   Non-colour tokens — identical across themes
   =========================================================================== */

:root {
  /* ---- typography ----------------------------------------------------- */
  /* Bricolage Grotesque is the Figma display face (variable, optical sizing).
     Plus Jakarta Sans replaces Montserrat for body/UI: closer to Gotham's
     proportions and far better at 15–18px. Both are OFL. */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid scale. Each clamp is anchored so the max lands on a 1440px viewport
     and the min stays readable at 320px — the vw term is the slope between. */
  /* The hero headline's cap is set by its ~640px copy column, not by the
     viewport: past ~56px the tagline stops breaking into balanced lines and
     starts breaking words. */
  --fs-display: clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.13rem + 1.2vw, 2rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-numeral: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);
  --fs-quote: clamp(1.25rem, 1rem + 1.3vw, 2rem);

  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --ls-display: -0.035em; /* tight tracking is most of the premium feel */
  --ls-heading: -0.025em;
  --ls-eyebrow: 0.18em;

  /* ---- layout --------------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 940px;
  --container-text: 68ch;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* Band padding is applied top AND bottom, so the number here is half the
     gap between two sections. At the old 7.5rem that made 240px of dead space
     between every band on a desktop. */
  --section-py: clamp(2.75rem, 5vw, 5rem);
  --section-py-lg: clamp(3.5rem, 6.5vw, 6.5rem);
  --header-h: 94px; /* sized by the stacked logo lockup, not the other way round */

  /* ---- spacing -------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- radii ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- motion --------------------------------------------------------- */
  /* One easing vocabulary across the whole site: --ease-out for anything the
     user triggered, --ease-spring for things that should feel physical. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 560ms;
  --dur-reveal: 800ms;

  /* ---- z-index -------------------------------------------------------- */
  --z-behind: -1;
  --z-art: 1;
  --z-content: 2;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* Breakpoints used throughout (custom properties are illegal in media
   queries, so they are repeated literally):
     sm 480 · md 720 · lg 1024 · xl 1200 · 2xl 1440                          */