/**
 * gökberk design system — design tokens (the foundation layer).
 *
 * One source of truth for the brand: colour, typography, spacing, radius, motion,
 * elevation. Naming follows `--gok-<category>-<name>`. As custom properties on
 * :root they inherit through Shadow DOM, so a component reading
 * `var(--gok-color-accent)` themes from this one place.
 *
 * Brand direction: a studio identity — minimal & editorial. Near-neutral canvas
 * (near-white paper / near-black ink + a neutral grey ramp) with a single
 * FOREST-GREEN accent used sparingly. Quiet confidence, strong typographic hierarchy,
 * generous whitespace. Every colour pairing is verified WCAG AAA (7:1 for text) on both
 * light and dark — see docs/brand/color.md.
 */

:root {
  /* Theme scheme. `light-dark()` in the semantic roles resolves against the used
   * color-scheme, so flipping this (see the [data-theme] selectors after this block)
   * re-themes everything — including inside Shadow DOM, because color-scheme inherits. */
  color-scheme: light;

  /* ─────────────  COLOUR — core (fixed across themes; authored in OKLCH)  ─────────────
   * Values are OKLCH — perceptually uniform, so tuning L/C/H is predictable, and ready for
   * P3 wide-gamut later. These are sRGB-faithful conversions of the Forest palette (no
   * visual change); the hex in each comment is the exact sRGB equivalent. All pairings
   * remain WCAG AAA. */
  --gok-color-white: oklch(100% 0 0); /* #ffffff */
  --gok-color-paper: oklch(98.5% 0 0); /* #fafaf9 — light pole, page background */
  --gok-color-ink: oklch(17.4% 0.004 286); /* #101012 — dark pole, near-black, never #000 */

  /* Neutral ramp (near-neutral grey, N-1 light → N-9 dark). The workhorse. */
  --gok-color-neutral-1: oklch(96.7% 0 0); /* #f4f4f5 */
  --gok-color-neutral-2: oklch(92.6% 0.003 286.3); /* #e6e6e8 */
  --gok-color-neutral-3: oklch(87.1% 0.004 286.3); /* #d4d4d7 */
  --gok-color-neutral-4: oklch(73.6% 0.007 286.2); /* #a9a9ae */
  --gok-color-neutral-5: oklch(56.8% 0.009 286.1); /* #76767c */
  --gok-color-neutral-6: oklch(44.8% 0.010 286); /* #54545a */
  --gok-color-neutral-7: oklch(28.7% 0.007 285.9); /* #2a2a2e */
  --gok-color-neutral-8: oklch(21.5% 0.006 285.9); /* #19191c */
  --gok-color-neutral-9: oklch(16.5% 0.004 285.9); /* #0e0e10 */

  /* Accent — the brand colour: FOREST GREEN. Woodland, grounded, natural. Used
   * sparingly (CTAs, links, focus, small marks). Theme-adaptive at the semantic-role
   * layer below: a DEEP forest in light (AAA — white text 8.22:1, link on paper
   * 7.87:1) and a VIVID spring green in dark (AAA — 11.7:1 on the dark canvas).
   * `accent` = deep (light primary) · `accent-strong` = deeper (light hover) ·
   * `accent-soft` = bright spring (dark primary) · `accent-soft-strong` = brighter
   * (dark hover). All pairings verified WCAG AAA. */
  --gok-color-accent: oklch(41.7% 0.090 153.4); /* #1a5a34 */
  --gok-color-accent-strong: oklch(36.8% 0.079 153.6); /* #154b2b */
  --gok-color-accent-soft: oklch(82.2% 0.142 145.1); /* #86dd8a */
  --gok-color-accent-soft-strong: oklch(86.4% 0.111 145.6); /* #a3e6a6 */
  --gok-color-accent-tint-light: oklch(95.3% 0.016 160.6); /* #e7f3ec — accent wash, light */
  --gok-color-accent-tint-dark: oklch(25.3% 0.032 152.9); /* #16271b — accent wash, dark */

  /* System / status — the deep value is AAA text on light; the *-bright value is AAA
   * on the dark canvas (the semantic roles below pick per theme). Use sparingly, always
   * paired with an icon or text — never colour alone. */
  --gok-color-error: oklch(46.2% 0.159 19.1); /* #9e2233 */
  --gok-color-error-bright: oklch(79.3% 0.120 32.4); /* #ff9e8a */
  --gok-color-success: oklch(42.1% 0.092 158.5); /* #0e5c3a */
  --gok-color-success-bright: oklch(82.0% 0.141 162.1); /* #5fe0a8 */
  --gok-color-warning: oklch(44.8% 0.093 80.5); /* #6f4e00 */
  --gok-color-warning-bright: oklch(82.6% 0.141 91.2); /* #e8c24a */
  --gok-color-info: oklch(41.2% 0.128 260.7); /* #1e478f */
  --gok-color-info-bright: oklch(75.4% 0.132 248.8); /* #67b5ff */

  /* ─────────────  COLOUR — semantic roles (the theming layer)  ─────────────
   * Components consume THESE roles for any value that adapts between light and dark.
   * The core tokens above stay fixed. Each role carries both its light and dark value
   * via the native CSS `light-dark()` function. The dark column is a curated remap
   * (bg → ink, surface → N-9/N-8, text → paper, muted → N-4) — NOT a ramp inversion.
   * The accent stays constant; values that must stay light (text-on-accent) keep a
   * core token. */

  /*                              light                              dark               */
  --gok-color-bg:               light-dark(var(--gok-color-paper),     var(--gok-color-neutral-9));
  --gok-color-surface:          light-dark(var(--gok-color-white),     var(--gok-color-neutral-8));
  --gok-color-surface-hover:    light-dark(var(--gok-color-neutral-1), var(--gok-color-neutral-7));
  --gok-color-surface-disabled: light-dark(var(--gok-color-neutral-1), var(--gok-color-neutral-8));
  /* Filled neutral surface (secondary controls, chips): */
  --gok-color-surface-strong:        light-dark(var(--gok-color-neutral-2), var(--gok-color-neutral-7));
  --gok-color-surface-strong-hover:  light-dark(var(--gok-color-neutral-3), var(--gok-color-neutral-6));
  --gok-color-surface-strong-active: light-dark(var(--gok-color-neutral-4), var(--gok-color-neutral-5));

  --gok-color-text:           light-dark(var(--gok-color-ink),       var(--gok-color-paper));
  --gok-color-text-muted:     light-dark(var(--gok-color-neutral-6), var(--gok-color-neutral-4)); /* AAA both: 7.20 / 8.24 */
  --gok-color-text-disabled:  light-dark(var(--gok-color-neutral-4), var(--gok-color-neutral-6));
  --gok-color-text-on-accent: light-dark(var(--gok-color-white), var(--gok-color-ink)); /* white on deep (light), ink on vivid (dark) */

  --gok-color-border:          light-dark(var(--gok-color-neutral-2), var(--gok-color-neutral-7));
  --gok-color-border-strong:   light-dark(var(--gok-color-neutral-4), var(--gok-color-neutral-6));
  --gok-color-border-emphasis: light-dark(var(--gok-color-ink),       var(--gok-color-paper));
  --gok-color-border-disabled: light-dark(var(--gok-color-neutral-2), var(--gok-color-neutral-7));

  /* Interactive accent roles — theme-adaptive: deep forest in light, vivid spring in
   * dark, so the accent reads AAA in both. */
  --gok-color-primary:         light-dark(var(--gok-color-accent),        var(--gok-color-accent-soft));
  --gok-color-primary-hover:   light-dark(var(--gok-color-accent-strong), var(--gok-color-accent-soft-strong));
  --gok-color-text-on-primary: light-dark(var(--gok-color-white),         var(--gok-color-ink));
  --gok-color-link:            light-dark(var(--gok-color-accent),        var(--gok-color-accent-soft));
  --gok-color-accent-subtle:   light-dark(var(--gok-color-accent-tint-light), var(--gok-color-accent-tint-dark));

  /* Status roles (theme-adaptive, AAA both): deep on light, bright on dark. */
  --gok-color-status-error:   light-dark(var(--gok-color-error),   var(--gok-color-error-bright));
  --gok-color-status-success: light-dark(var(--gok-color-success), var(--gok-color-success-bright));
  --gok-color-status-warning: light-dark(var(--gok-color-warning), var(--gok-color-warning-bright));
  --gok-color-status-info:    light-dark(var(--gok-color-info),    var(--gok-color-info-bright));

  /* ─────────────  TYPOGRAPHY  ─────────────
   * Geist (grotesque) for display + text, Geist Mono for labels/eyebrows/code.
   * One family for headings and body keeps the system coherent; hierarchy comes
   * from weight, size, and tracking — the editorial way. */
  --gok-font-family-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gok-font-family-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gok-font-family-mono: "Geist Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --gok-font-weight-light: 300;
  --gok-font-weight-regular: 400;
  --gok-font-weight-medium: 500;
  --gok-font-weight-semibold: 600;
  --gok-font-weight-bold: 700;

  /* Type roles — each has family / weight / size / line (+ tracking on display roles).
   * VALUES BELOW ARE THE MOBILE SCALE (the default); the
   * @media (min-width: 768px) block at the END of this file overrides size/line to
   * Desktop for the roles that grow. */

  /* Expressive — the hero display role. */
  --gok-type-expressive-family: var(--gok-font-family-display);
  --gok-type-expressive-weight: var(--gok-font-weight-medium);
  --gok-type-expressive-size: 3rem; /* 48 */
  --gok-type-expressive-line: 3.15rem; /* 50.4 */
  --gok-type-expressive-tracking: -0.022em;

  --gok-type-headline-1-family: var(--gok-font-family-display);
  --gok-type-headline-1-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-1-size: 2.25rem; /* 36 */
  --gok-type-headline-1-line: 2.475rem; /* 39.6 */
  --gok-type-headline-1-tracking: -0.02em;

  --gok-type-headline-2-family: var(--gok-font-family-display);
  --gok-type-headline-2-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-2-size: 1.875rem; /* 30 */
  --gok-type-headline-2-line: 2.1375rem; /* 34.2 */
  --gok-type-headline-2-tracking: -0.018em;

  --gok-type-headline-3-family: var(--gok-font-family-display);
  --gok-type-headline-3-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-3-size: 1.5rem; /* 24 */
  --gok-type-headline-3-line: 1.8rem; /* 28.8 */
  --gok-type-headline-3-tracking: -0.012em;

  --gok-type-headline-4-family: var(--gok-font-family-display);
  --gok-type-headline-4-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-4-size: 1.25rem; /* 20 */
  --gok-type-headline-4-line: 1.55rem; /* 24.8 */
  --gok-type-headline-4-tracking: -0.008em;

  --gok-type-headline-5-family: var(--gok-font-family-display);
  --gok-type-headline-5-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-5-size: 1.0625rem; /* 17 */
  --gok-type-headline-5-line: 1.4rem; /* 22.4 */
  --gok-type-headline-5-tracking: -0.004em;

  --gok-type-headline-6-family: var(--gok-font-family-text);
  --gok-type-headline-6-weight: var(--gok-font-weight-semibold);
  --gok-type-headline-6-size: 0.9375rem; /* 15 */
  --gok-type-headline-6-line: 1.35rem; /* 21.6 */
  --gok-type-headline-6-tracking: 0em;

  /* Eyebrow / overline — the studio's signature small mono label (uppercase applied
   * in the utility class). Pairs above headlines and section heads. */
  --gok-type-eyebrow-family: var(--gok-font-family-mono);
  --gok-type-eyebrow-weight: var(--gok-font-weight-medium);
  --gok-type-eyebrow-size: 0.75rem; /* 12 */
  --gok-type-eyebrow-line: 1rem; /* 16 */
  --gok-type-eyebrow-tracking: 0.08em;

  --gok-type-body-intro-family: var(--gok-font-family-text);
  --gok-type-body-intro-weight: var(--gok-font-weight-regular);
  --gok-type-body-intro-size: 1.25rem; /* 20 */
  --gok-type-body-intro-line: 1.9rem; /* 30.4 */

  --gok-type-body-large-family: var(--gok-font-family-text);
  --gok-type-body-large-weight: var(--gok-font-weight-regular);
  --gok-type-body-large-size: 1.125rem; /* 18 */
  --gok-type-body-large-line: 1.75rem; /* 28 */

  --gok-type-body-regular-family: var(--gok-font-family-text);
  --gok-type-body-regular-weight: var(--gok-font-weight-regular);
  --gok-type-body-regular-size: 1rem; /* 16 */
  --gok-type-body-regular-line: 1.6rem; /* 25.6 */

  --gok-type-body-small-family: var(--gok-font-family-text);
  --gok-type-body-small-weight: var(--gok-font-weight-regular);
  --gok-type-body-small-size: 0.875rem; /* 14 */
  --gok-type-body-small-line: 1.45rem; /* 23.2 */

  --gok-type-caption-family: var(--gok-font-family-text);
  --gok-type-caption-weight: var(--gok-font-weight-regular);
  --gok-type-caption-size: 0.8125rem; /* 13 */
  --gok-type-caption-line: 1.3rem; /* 20.8 */

  --gok-type-footnote-family: var(--gok-font-family-text);
  --gok-type-footnote-weight: var(--gok-font-weight-regular);
  --gok-type-footnote-size: 0.75rem; /* 12 */
  --gok-type-footnote-line: 1.1rem; /* 17.6 */

  /* Button type roles */
  --gok-type-button-large-family: var(--gok-font-family-text);
  --gok-type-button-large-weight: var(--gok-font-weight-medium);
  --gok-type-button-large-size: 0.9375rem; /* 15 */
  --gok-type-button-large-line: 1rem;

  --gok-type-button-regular-family: var(--gok-font-family-text);
  --gok-type-button-regular-weight: var(--gok-font-weight-medium);
  --gok-type-button-regular-size: 0.875rem; /* 14 */
  --gok-type-button-regular-line: 1rem;

  /* Code / inline mono */
  --gok-type-code-family: var(--gok-font-family-mono);
  --gok-type-code-weight: var(--gok-font-weight-regular);
  --gok-type-code-size: 0.875rem; /* 14 */
  --gok-type-code-line: 1.45rem; /* 23.2 */

  /* ─────────────  SPACING  ─────────────
   * 4px baseline. Editorial layouts lean on the generous upper steps (900–1100)
   * for section rhythm; controls use the lower steps. */
  --gok-space-100: 4px;
  --gok-space-200: 8px;
  --gok-space-300: 12px;
  --gok-space-400: 16px;
  --gok-space-500: 24px;
  --gok-space-600: 32px;
  --gok-space-700: 40px;
  --gok-space-800: 48px;
  --gok-space-900: 64px;
  --gok-space-1000: 96px;
  --gok-space-1100: 128px;

  /* ─────────────  SEMANTIC SPACING  ─────────────
   * Intent names over the raw scale — no new values, just like --gok-density-* and
   * --gok-grid-* alias the steps above. inset = padding INSIDE a surface, stack =
   * vertical gap between blocks, inline = horizontal gap between in-row items; section =
   * the editorial intra-/between-section rhythm. Reach for these in components so intent
   * reads from the name; drop to raw --gok-space-* only for one-off values. */
  --gok-space-inset-s: var(--gok-space-300); /* 12 — compact control padding */
  --gok-space-inset-m: var(--gok-space-400); /* 16 — default element padding */
  --gok-space-inset-l: var(--gok-space-600); /* 32 — card / panel padding */
  --gok-space-stack-s: var(--gok-space-200); /* 8  — tight vertical stack */
  --gok-space-stack-m: var(--gok-space-400); /* 16 — default vertical stack */
  --gok-space-stack-l: var(--gok-space-700); /* 40 — group separation */
  --gok-space-inline-s: var(--gok-space-200); /* 8  — icon ↔ label */
  --gok-space-inline-m: var(--gok-space-300); /* 12 — button row */
  --gok-space-inline-l: var(--gok-space-500); /* 24 — toolbar groups */
  --gok-space-section: var(--gok-space-900); /* 64 — padding WITHIN a section */
  --gok-space-section-gap: var(--gok-space-1100); /* 128 — BETWEEN major divisions */

  /* ─────────────  BREAKPOINTS  ─────────────
   * Viewport widths where layout reflows. A small named scale — the brand barely reflows,
   * so this is deliberately tidy. NOTE: CSS @media can't read custom properties, so the
   * actual queries inline these px values; the tokens document and coordinate them (the
   * desktop type-scale @media at the END of this file is the canonical example). `-m`
   * (768px) is the Mobile → Desktop type switch; `--gok-breakpoint-desktop` is kept as its
   * semantic alias. */
  --gok-breakpoint-s: 480px; /* large phone */
  --gok-breakpoint-m: 768px; /* tablet — the Mobile → Desktop type switch */
  --gok-breakpoint-l: 1024px; /* laptop */
  --gok-breakpoint-xl: 1280px; /* desktop */
  --gok-breakpoint-desktop: 768px; /* semantic alias of -m (existing name kept) */

  /* ─────────────  LAYOUT / GRID  ─────────────
   * Two jobs kept SEPARATE: the reading MEASURE (narrow, so long text stays readable) and
   * the layout CANVAS (wide — galleries, media, split layouts — or full-bleed). Editorial
   * pages vary block width down the page (prose ↔ content ↔ wide ↔ bleed). The page gutter
   * is fluid so large screens breathe instead of just gaining empty margin. Consumed via
   * the .gok-container / .gok-grid utilities in layout.css. */
  --gok-grid-columns: 12;
  --gok-grid-gutter: var(--gok-space-500); /* 24 — gap between columns */
  --gok-grid-min: 220px; /* min track width for the self-collapsing auto grid */
  --gok-container-prose: 72ch; /* long-form reading measure (~70 chars) */
  --gok-container-content: 1200px; /* default page sections */
  --gok-container-wide: 1440px; /* galleries, media, split layouts */
  --gok-container-inline-pad: clamp(var(--gok-space-500), 5vw, var(--gok-space-900)); /* 24 → 64, fluid page gutter */

  /* ─────────────  RADIUS  ─────────────
   * Minimal & editorial → crisp, small radii. Pill reserved for tags/avatars. */
  --gok-radius-s: 2px;
  --gok-radius-m: 6px;
  --gok-radius-l: 12px;
  --gok-radius-pill: 999px;

  /* ─────────────  BORDER WIDTH  ─────────────
   * A tidy 3-step scale beside radius. `hairline` (1px) is the default — the editorial
   * divider already used for section rules and control borders; the heavier steps are for
   * emphasis and selection. Theme-invariant (the colour comes from a --gok-color-border*
   * role). */
  --gok-border-width-hairline: 1px; /* default rule / divider / control border */
  --gok-border-width-regular: 2px; /* emphasis — selected / active control */
  --gok-border-width-strong: 4px; /* heavy accent — feature divider */

  /* ─────────────  CONTROL HEIGHT  ─────────────
   * One shared height scale every interactive control consumes, so a button, input,
   * select and search placed side by side share a box edge. */
  --gok-control-height-s: 32px;
  --gok-control-height-m: 40px;
  --gok-control-height-l: 48px;

  /* ─────────────  SIZE — glyph / icon diameters  ─────────────
   * Sub-control glyph sizes, distinct from the control-height scale (which starts at 32px,
   * far too large for an inline glyph). Icons inherit `currentColor` and are sized from this
   * scale: `m` (20px) is the default, optically paired with body-regular; `s` (16px) for dense
   * rows / body-small, `l` (24px) for emphasis or a standalone glyph. Theme- and density-
   * invariant — a glyph is already sub-control, so compact never shrinks it. Consumed by
   * `gok-icon` (and the spinner ring, previously an interim literal rem via `--gok-spinner-size`).
   * The namespace is left open to extend (`--gok-size-avatar-*`/`-element-*`) when gok-avatar lands. */
  --gok-size-icon-s: 1rem; /* 16 */
  --gok-size-icon-m: 1.25rem; /* 20 — default */
  --gok-size-icon-l: 1.5rem; /* 24 */

  /* ─────────────  DENSITY  ─────────────
   * Information density as a CURATED REMAP (like dark mode is a curated colour remap,
   * NOT a mechanical rescale). These semantic role dimensions SELECT AMONG the base
   * scales above. Default (here) = regular. Switch a subtree with
   * `[data-density="compact"]` (cascades into Shadow DOM), or one component locally. */
  --gok-density-control-height: var(--gok-control-height-l);
  --gok-density-row-padding-block: var(--gok-space-300);
  --gok-density-row-min-height: 0px;
  --gok-density-stack-gap: var(--gok-space-400);
  --gok-density-control-text-size: var(--gok-type-body-regular-size);
  --gok-density-control-text-line: var(--gok-type-body-regular-line);

  /* ─────────────  FOCUS RING  ─────────────
   * One keyboard-focus affordance shared by every interactive control. Drawn as a
   * `:focus-visible` outline (follows the control's radius, costs no layout). Colour
   * is the brand accent (theme-adaptive — deep in light, vivid in dark). */
  --gok-color-focus-ring: light-dark(var(--gok-color-accent), var(--gok-color-accent-soft));
  --gok-focus-ring-width: 2px;
  --gok-focus-ring-offset: 2px;

  /* ─────────────  OPACITY & STATE LAYERS  ─────────────
   * One interaction model. `disabled` dims a whole control (`opacity: …`). hover/focus/
   * pressed are the ALPHA of an ink wash laid over a surface — compose them, e.g.
   * `color-mix(in srgb, var(--gok-color-text) calc(var(--gok-opacity-hover) * 100%),
   * transparent)` — to tint any surface consistently (the focus wash supplements, never
   * replaces, the focus ring above). `scrim` is the modal/drawer backdrop strength,
   * composed into a ready-to-use --gok-color-scrim. Theme-invariant; alpha uses the
   * space-separated rgb syntax to match the shadow tokens. */
  --gok-opacity-disabled: 0.4; /* dim a disabled control */
  --gok-opacity-hover: 0.04; /* state-layer wash on hover */
  --gok-opacity-focus: 0.08; /* state-layer wash on focus (supplements the ring) */
  --gok-opacity-pressed: 0.12; /* state-layer wash on press / active */
  --gok-opacity-scrim: 0.5; /* modal / drawer backdrop strength */
  --gok-color-scrim: rgb(0 0 0 / var(--gok-opacity-scrim)); /* ready-to-use backdrop fill */

  /* ─────────────  MOTION  ─────────────
   * Quiet & precise. Micro-interactions stay sub-150ms; surfaces are longer but
   * still snappy. Brand rule: PRECISE curve to enter (snaps into place, no settle),
   * DYNAMIC curve to exit (accelerates away). No bounce. The reduced-motion block at
   * the end collapses durations to ~0 library-wide. */
  --gok-motion-duration-instant: 100ms; /* colour / border / hover micro-states */
  --gok-motion-duration-fast: 150ms; /* chevrons, checks, small reveals */
  --gok-motion-duration-moderate: 220ms; /* popovers, menus, tabs */
  --gok-motion-duration-slow: 300ms; /* modal / drawer / toast surfaces */

  /* Ambient / looping durations — for INFINITE loops (spin, shimmer, pulse), never UI
   * transitions. Long on purpose: a sub-second motion that repeats forever reads as frantic.
   * Deliberately kept OUT of the reduced-motion collapse below — a loop must slow or replace
   * itself per component, never collapse to ~0 (that blurs/janks). Loops read THESE, not the
   * transition durations above. */
  --gok-motion-duration-loop: 1.2s; /* one full spin / rotation */
  --gok-motion-duration-shimmer: 1.8s; /* a highlight sweep across a surface */
  --gok-motion-duration-pulse: 1.6s; /* a breathing opacity cycle */

  --gok-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric micro-states */
  --gok-motion-ease-precise: cubic-bezier(0.2, 0, 0, 1); /* ENTER — confident, snaps in */
  --gok-motion-ease-dynamic: cubic-bezier(0.4, 0, 1, 1); /* EXIT — accelerates away */

  /* ─────────────  ELEVATION (SHADOW)  ─────────────
   * Soft, restrained depth language. Three levels by how far the surface sits above
   * the page: raised (hover/floating), overlay (anchored popovers), modal (top-layer). */
  --gok-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06);
  --gok-shadow-2: 0 4px 16px rgb(0 0 0 / 0.1);
  --gok-shadow-3: 0 12px 40px rgb(0 0 0 / 0.18);

  /* ─────────────  Z-INDEX / LAYERING  ─────────────
   * Ordered stacking tiers for overlapping surfaces, so components never invent raw
   * integers (the cause of "z-index wars"). Steps of 100 leave room to slot a layer in
   * later; `raised` is the one exception — a single step above base. This is STACKING
   * ORDER; it pairs with the shadow-based elevation above (--gok-shadow-*), which conveys
   * depth visually. */
  --gok-z-base: 0;
  --gok-z-raised: 1; /* hover-lifted in-flow element */
  --gok-z-sticky: 100; /* sticky headers / toolbars */
  --gok-z-dropdown: 200; /* menus, selects, comboboxes */
  --gok-z-overlay: 300; /* modal backdrop / scrim */
  --gok-z-modal: 400; /* dialog, drawer */
  --gok-z-popover: 500; /* popovers (can open from within a modal) */
  --gok-z-toast: 600; /* transient notifications */
  --gok-z-tooltip: 700; /* tooltips — topmost content */
  --gok-z-skip-link: 800; /* a11y skip-link, above everything */
}

/* ─────────────  THEME SWITCH  ─────────────
 * Set one of these on a root (usually <html>) to pick the scheme; it cascades into
 * Shadow DOM, so every `light-dark()` role re-resolves. Default is light (on :root).
 *   <html data-theme="dark">   → force dark
 *   <html data-theme="auto">   → follow OS
 * `[data-theme-dark]` is a boolean alias for dev-page toggles. */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"],
[data-theme-dark] {
  color-scheme: dark;
}

[data-theme="auto"] {
  color-scheme: light dark;
}

/* ─────────────  DENSITY SWITCH  ─────────────
 *   <html data-density="compact">   → tighten controls / rows / nav
 * A component's own `density="compact|regular"` re-points the same roles locally. */
[data-density="compact"] {
  --gok-density-control-height: var(--gok-control-height-m);
  --gok-density-row-padding-block: var(--gok-space-100);
  --gok-density-row-min-height: var(--gok-control-height-s);
  --gok-density-stack-gap: var(--gok-space-300);
  --gok-density-control-text-size: var(--gok-type-body-small-size);
  --gok-density-control-text-line: var(--gok-type-body-small-line);
}

/* ─────────────  Desktop type scale  ─────────────
 * Overrides size/line for the roles that grow at ≥ breakpoint. Roles not listed are
 * identical Mobile/Desktop (headline-6, eyebrow, body-regular/small, caption,
 * footnote, buttons, code). Media queries can't read custom properties, so 768px is
 * inlined here — keep it in sync with --gok-breakpoint-desktop. */
@media (min-width: 768px) {
  :root {
    --gok-type-expressive-size: 5rem; /* 80 */
    --gok-type-expressive-line: 5rem;

    --gok-type-headline-1-size: 3.5rem; /* 56 */
    --gok-type-headline-1-line: 3.7rem; /* 59.2 */

    --gok-type-headline-2-size: 2.75rem; /* 44 */
    --gok-type-headline-2-line: 3rem; /* 48 */

    --gok-type-headline-3-size: 2rem; /* 32 */
    --gok-type-headline-3-line: 2.4rem; /* 38.4 */

    --gok-type-headline-4-size: 1.5rem; /* 24 */
    --gok-type-headline-4-line: 1.85rem; /* 29.6 */

    --gok-type-headline-5-size: 1.25rem; /* 20 */
    --gok-type-headline-5-line: 1.6rem; /* 25.6 */

    --gok-type-body-intro-size: 1.5rem; /* 24 */
    --gok-type-body-intro-line: 2.1rem; /* 33.6 */

    --gok-type-body-large-size: 1.25rem; /* 20 */
    --gok-type-body-large-line: 1.9rem; /* 30.4 */
  }
}

/* ─────────────  REDUCED MOTION  ─────────────
 * Honour the OS "reduce motion" preference in ONE place: collapse every TRANSITION
 * duration to ~0 so token-driven transitions resolve instantly. A hair above 0 so
 * transitionend/animationend still fire. The ambient/looping durations
 * (`--gok-motion-duration-loop/-shimmer/-pulse`) are intentionally NOT collapsed here —
 * infinite loops read those and slow/replace themselves per component (a spinner swaps to a
 * calm pulse, a skeleton freezes), so collapsing them to ~0 would blur, not calm. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gok-motion-duration-instant: 0.01ms;
    --gok-motion-duration-fast: 0.01ms;
    --gok-motion-duration-moderate: 0.01ms;
    --gok-motion-duration-slow: 0.01ms;
  }
}

/* ─────────────  FORCED COLORS (Windows High Contrast)  ─────────────
 * Degrade gracefully under `forced-colors: active` by re-pointing the semantic colour roles
 * to CSS SYSTEM COLORS — so HC behaviour is INTENTIONAL (links read as LinkText, borders
 * stay visible as CanvasText) instead of whatever the UA would force. Components read the
 * same roles, so they inherit this for free. This is the accessibility FLOOR; a full
 * high-contrast theme stays deferred. Two rules still apply at the element level: fill-only
 * elements need a border (fills are flattened to Canvas), and a colour that IS content needs
 * `forced-color-adjust: none`. See docs/accessibility.md. */
@media (forced-colors: active) {
  :root {
    /* Surfaces flatten to the page canvas. */
    --gok-color-bg: Canvas;
    --gok-color-surface: Canvas;
    --gok-color-surface-hover: Canvas;
    --gok-color-surface-disabled: Canvas;
    --gok-color-surface-strong: Canvas;
    --gok-color-surface-strong-hover: Canvas;
    --gok-color-surface-strong-active: Canvas;
    --gok-color-accent-subtle: Canvas;

    /* Text. */
    --gok-color-text: CanvasText;
    --gok-color-text-muted: GrayText;
    --gok-color-text-disabled: GrayText;

    /* Borders stay visible — this is how structure survives once fills are flattened. */
    --gok-color-border: CanvasText;
    --gok-color-border-strong: CanvasText;
    --gok-color-border-emphasis: CanvasText;
    --gok-color-border-disabled: GrayText;

    /* Interactive accents → the system's salient colours. */
    --gok-color-primary: Highlight;
    --gok-color-primary-hover: Highlight;
    --gok-color-text-on-primary: HighlightText;
    --gok-color-text-on-accent: HighlightText;
    --gok-color-link: LinkText;
    --gok-color-focus-ring: CanvasText; /* outline stays visible against Canvas */

    /* Status: HC has no per-status system colours, and the brand already forbids colour-only
     * status (always icon/text). Keep them legible as CanvasText. */
    --gok-color-status-error: CanvasText;
    --gok-color-status-success: CanvasText;
    --gok-color-status-warning: CanvasText;
    --gok-color-status-info: CanvasText;
  }
}