/* ==========================================================================
   WINTEAM — DESIGN TOKENS

   Two layers:

   1. PRIMITIVES   Raw brand values + derived ramps. Never referenced by a
                   component directly — they exist so the ramps stay honest.
   2. SEMANTICS    Scheme-aware roles (surface / content / line / accent).
                   These are what components consume. Flip `data-scheme` on
                   any element and everything inside re-reads the new values.

   The Next build had a third layer mapping these onto Tailwind utilities.
   There is no Tailwind compiler here, so components read the variables
   directly and the mapping layer is gone — the values below are unchanged.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. PRIMITIVES */

:root {
  /* Brand — canonical values. Do not alter without brand approval. */
  --winteam-dark: #0b4353;
  --winteam-cyan: #2ca6c9;
  --winteam-white: #f4f3ef;
  --winteam-black: #111516;
  --winteam-grey: #d9dddc;

  /* Deep — the architectural teal. 700 is the brand value. */
  --wt-deep-50: #eaf2f5;
  --wt-deep-100: #cfe1e8;
  --wt-deep-200: #9dc2cf;
  --wt-deep-300: #6ba1b4;
  --wt-deep-400: #3d7f97;
  --wt-deep-500: #14697f;
  --wt-deep-600: #0f5568;
  --wt-deep-700: var(--winteam-dark);
  --wt-deep-800: #08333f;
  --wt-deep-900: #05242d;
  --wt-deep-950: #03161c;

  /* Cyan — glazing light. 500 is the brand value. */
  --wt-cyan-50: #edf8fb;
  --wt-cyan-100: #d3eef6;
  --wt-cyan-200: #a8ddec;
  --wt-cyan-300: #7ccbe1;
  --wt-cyan-400: #52b8d6;
  --wt-cyan-500: var(--winteam-cyan);
  --wt-cyan-600: #2288a6;
  --wt-cyan-700: #1a6a82;
  --wt-cyan-800: #144f61;
  --wt-cyan-900: #0e3743;

  /* Paper — warm off-white. 100 is the brand value. */
  --wt-paper-0: #ffffff;
  --wt-paper-50: #fafaf8;
  --wt-paper-100: var(--winteam-white);
  --wt-paper-200: #eceae4;
  --wt-paper-300: #e2e1db;

  /* Grey — anodised aluminium. 400 is the brand value. */
  --wt-grey-200: #eceeed;
  --wt-grey-300: #e4e7e6;
  --wt-grey-400: var(--winteam-grey);
  --wt-grey-500: #bcc3c2;
  --wt-grey-600: #98a1a0;
  --wt-grey-700: #6e7777;

  /* Ink — near-black. 900 is the brand value. */
  --wt-ink-400: #5f6768;
  --wt-ink-500: #4a5152;
  --wt-ink-600: #343a3b;
  --wt-ink-700: #232829;
  --wt-ink-800: #191d1e;
  --wt-ink-900: var(--winteam-black);
  --wt-ink-950: #0a0d0e;

  /* Signal — used sparingly, never decoratively. */
  --wt-positive: #4f9d78;
  --wt-warning: #c99a2c;
  --wt-critical: #c25a4a;
}

/* ---------------------------------------------------------------- 2. SEMANTICS */

/*  Every surface declares a scheme. The root default is `ink` — the
    cinematic register. Wrap any subtree in `data-scheme="paper"` or
    `data-scheme="deep"` to invert it; nothing else needs to change.       */

:root,
[data-scheme="ink"] {
  color-scheme: dark;

  --surface: var(--wt-ink-900);
  --surface-raised: var(--wt-ink-800);
  --surface-sunken: var(--wt-ink-950);
  --surface-inverse: var(--wt-paper-100);

  --content: var(--wt-paper-100);
  /* Muted and subtle still have to clear 4.5:1 against the surface — the
     eyebrow is set at 11px, which is where secondary text stops being
     decorative and starts being unreadable. Do not lower these. */
  --content-muted: color-mix(in oklab, var(--wt-paper-100) 68%, transparent);
  --content-subtle: color-mix(in oklab, var(--wt-paper-100) 50%, transparent);
  --content-inverse: var(--wt-ink-900);

  --line: color-mix(in oklab, var(--wt-paper-100) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--wt-paper-100) 30%, transparent);

  --accent: var(--wt-cyan-500);
  --accent-hover: var(--wt-cyan-400);
  --accent-contrast: var(--wt-ink-900);

  --glass-bg: color-mix(in oklab, var(--wt-ink-900) 58%, transparent);
  --glass-line: color-mix(in oklab, var(--wt-paper-100) 12%, transparent);

  --scrim: color-mix(in oklab, var(--wt-ink-950) 72%, transparent);
  --focus: var(--wt-cyan-400);
  --shadow-color: 0deg 0% 0%;
}

[data-scheme="paper"] {
  color-scheme: light;

  --surface: var(--wt-paper-100);
  --surface-raised: var(--wt-paper-50);
  --surface-sunken: var(--wt-paper-200);
  --surface-inverse: var(--wt-ink-900);

  --content: var(--wt-ink-900);
  /* The greys are for lines and fills, not for text on paper — at 11px they
     land around 2.4:1. Secondary text uses the ink ramp instead. */
  --content-muted: var(--wt-ink-500);
  --content-subtle: var(--wt-ink-400);
  --content-inverse: var(--wt-paper-100);

  --line: color-mix(in oklab, var(--wt-ink-900) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--wt-ink-900) 26%, transparent);

  /* Cyan 600 on paper measures 3.68:1 — below AA for the link text and only
     just above the 3:1 a focus ring needs. 700 measures 5.52:1, and paper-50
     on top of it 5.86:1, so the solid button stays legible too. */
  --accent: var(--wt-cyan-700);
  --accent-hover: var(--wt-cyan-800);
  --accent-contrast: var(--wt-paper-50);

  --glass-bg: color-mix(in oklab, var(--wt-paper-100) 72%, transparent);
  --glass-line: color-mix(in oklab, var(--wt-ink-900) 10%, transparent);

  --scrim: color-mix(in oklab, var(--wt-deep-950) 40%, transparent);
  --focus: var(--wt-cyan-700);
  --shadow-color: 197deg 25% 20%;
}

[data-scheme="deep"] {
  color-scheme: dark;

  --surface: var(--wt-deep-700);
  --surface-raised: var(--wt-deep-600);
  --surface-sunken: var(--wt-deep-800);
  --surface-inverse: var(--wt-paper-100);

  --content: var(--wt-paper-100);
  --content-muted: color-mix(in oklab, var(--wt-paper-100) 70%, transparent);
  /* Deep is a lighter ground than ink, so the same 52% mix that clears AA
     there measures only 3.85:1 here. 64% measures 4.95:1. The eyebrow is set
     at 11px — this is the difference between secondary and unreadable. */
  --content-subtle: color-mix(in oklab, var(--wt-paper-100) 64%, transparent);
  --content-inverse: var(--wt-deep-700);

  --line: color-mix(in oklab, var(--wt-paper-100) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--wt-paper-100) 32%, transparent);

  --accent: var(--wt-cyan-300);
  --accent-hover: var(--wt-cyan-200);
  --accent-contrast: var(--wt-deep-900);

  --glass-bg: color-mix(in oklab, var(--wt-deep-800) 55%, transparent);
  --glass-line: color-mix(in oklab, var(--wt-paper-100) 14%, transparent);

  --scrim: color-mix(in oklab, var(--wt-deep-950) 62%, transparent);
  --focus: var(--wt-cyan-200);
  --shadow-color: 197deg 60% 8%;
}

/* ------------------------------------------------- Layout & motion constants */

:root {
  /* Horizontal rhythm. The gutter is the single source of edge distance. */
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --grid-columns: 12;

  /* Vertical rhythm. Negative space is a brand asset — these run generous. */
  --space-section: clamp(6rem, 13vw, 15rem);
  --space-section-sm: clamp(3.5rem, 7vw, 8rem);
  --space-block: clamp(2rem, 4vw, 4.5rem);

  /* Chrome */
  --nav-h: clamp(4.5rem, 5.5vw, 6.25rem);
  --nav-h-compact: clamp(3.75rem, 4.5vw, 4.75rem);

  /* Glass */
  --glass-blur: 20px;
  --glass-saturate: 150%;

  /* Stacking order — one scale, no ad-hoc z-index anywhere else. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-cursor: 500;

  /* Families ------------------------------------------------------------- */
  --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* Display scale — Instrument Serif, optically tightened as it grows ---- */
  --text-display-1: clamp(3.25rem, 11vw, 12rem);
  --text-display-2: clamp(2.75rem, 7.5vw, 7.5rem);
  --text-display-3: clamp(2.25rem, 5vw, 4.5rem);

  /* Title scale — the bridge between display and interface --------------- */
  --text-title-1: clamp(1.75rem, 3.2vw, 3rem);
  --text-title-2: clamp(1.375rem, 2.2vw, 2rem);
  --text-title-3: clamp(1.125rem, 1.5vw, 1.375rem);

  /* Interface scale — Inter ---------------------------------------------- */
  --text-lead: clamp(1.0625rem, 1.35vw, 1.375rem);
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.6875rem;

  /* Tracking ------------------------------------------------------------- */
  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.18em;
  --tracking-widest: 0.28em;

  /* Leading -------------------------------------------------------------- */
  --leading-display: 0.9;
  --leading-title: 1.08;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  /* Measures ------------------------------------------------------------- */
  --measure-narrow: 34rem;   /* 544px  — pull quotes, captions           */
  --measure-text: 44rem;     /* 704px  — optimal reading measure         */
  --measure-content: 82.5rem;/* 1320px — standard editorial column       */
  --measure-wide: 97.5rem;   /* 1560px — full-bleed architectural grid   */

  /* Radii — architecture is orthogonal; curves are the exception --------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Easing --------------------------------------------------------------- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations ------------------------------------------------------------ */
  --duration-instant: 150ms;
  --duration-fast: 300ms;
  --duration-base: 600ms;
  --duration-slow: 900ms;
  --duration-cinematic: 1400ms;

  /* Elevation — light, diffuse, architectural. Never a drop shadow. ------ */
  --shadow-sheet: 0 1px 2px hsl(var(--shadow-color) / 0.04),
    0 8px 24px -12px hsl(var(--shadow-color) / 0.12);
  --shadow-lifted: 0 2px 4px hsl(var(--shadow-color) / 0.05),
    0 24px 64px -24px hsl(var(--shadow-color) / 0.22);
}