/* ============================================================================
   Compel — site token layer
   COPIED from ../system/tokens.css. Do not edit here; edit the spec and re-copy.

   One deviation from the source, on request: the site is LIGHT BY DEFAULT.
   Dark applies only when [data-mode="dark"] is stamped, which only the nav
   toggle does. prefers-color-scheme is deliberately not consulted, and the
   host's own [data-theme] stamp is deliberately not matched, so a visitor
   whose OS is dark still lands on the cream ground. Dark is still fully
   designed and one click away. Values are identical to the source.
   ============================================================================ */

:root {
  /* Terracotta — five stops, because one hex cannot be both fill and small text */
  --clay-200: #F1EAD8;
  --clay-300: #E5B184;
  --clay-400: #E0A370;
  --clay-500: #CF7C36;
  --clay-600: #AE5820;
  --clay-700: #9A4C1A;
  --clay-800: #884316;
  --clay-900: #322319;

  /* Warm neutrals */
  --sand-50:  #FFFDF8;
  --sand-100: #F6F1E8;
  --sand-200: #EFE8DB;
  --sand-300: #E3DACA;
  --sand-400: #EDE6D9;
  --stone-500: #6E655A;
  --stone-600: #514A40;
  --stone-700: #332B24;
  --stone-800: #211C18;
  --stone-900: #171310;
  --stone-950: #100D0B;
  --ink-900:  #1F1B16;
  --ink-050:  #F6F1E9;
  --ink-200:  #BFB4A6;
  --ink-300:  #A39889;

  --green-700: #0B6E4C;  --green-100: #E2EFE5;
  --green-400: #5CC492;  --green-950: #163025;
  --amber-700: #8F6200;  --amber-100: #F5EDD9;
  --amber-400: #D9A441;  --amber-950: #332714;
  --red-700:   #B3261E;  --red-100:   #F8E6E1;
  --red-400:   #F08878;  --red-950:   #361D1A;

  --steel-600: #286099;
  --steel-500: #346BA6;
  --plum-600:  #9E6BA2;
  --plum-500:  #B072B5;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --text-micro: 11px;
  --text-caption: 12px;
  --text-ui: 13px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-title-sm: 19px;
  --text-title: 23px;
  --text-display-sm: 28px;
  --text-display: 34px;
  --text-display-lg: 44px;
  --text-hero: 64px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --track-display: -0.034em;
  --track-title: -0.02em;
  --track-body: 0em;
  --track-label: 0.1em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-14: 56px; --space-20: 80px;

  --radius: 2px;
  --radius-bar: 0px;

  --dur-color: 150ms;
  --dur-move: 200ms;
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --ring-w: 2px;
  --ring-o: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-color: 1ms; --dur-move: 1ms; }
}

/* --- SEMANTIC, light (default) ------------------------------------------- */
:root,
[data-mode="light"] {
  color-scheme: light;
  --bg: var(--sand-100);
  --surface: var(--sand-50);
  --sunk: var(--sand-200);

  --ink: var(--ink-900);
  --ink-2: var(--stone-600);
  --ink-3: var(--stone-500);

  --line: var(--sand-300);
  --line-2: var(--sand-400);
  --border-control: var(--ink-3);
  --ring-color: var(--ink);

  --accent: var(--clay-600);
  --accent-ink: #FFFFFF;
  --accent-text: var(--clay-700);
  --accent-on-tint: var(--clay-800);
  --accent-tint: var(--clay-200);
  --accent-shadow: var(--clay-800);

  --chart-1: var(--accent);
  --chart-2: var(--steel-600);
  --chart-3: var(--plum-600);

  --positive: var(--green-700);  --positive-tint: var(--green-100);
  --caution:  var(--amber-700);  --caution-tint:  var(--amber-100);
  --critical: var(--red-700);    --critical-tint: var(--red-100);

  --positive-ink: #FFFFFF;
  --caution-ink:  #FFFFFF;
  --critical-ink: #FFFFFF;

  /* Ground-relative, never flipped. See 07-brand.md. */
  --accent-on-dark:  var(--clay-400);
  --accent-on-light: var(--clay-700);

  --track: #F1EBDF;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(31, 27, 22, 0.05), 0 8px 22px rgba(31, 27, 22, 0.07);
  --elevation-2: 0 8px 26px rgba(31, 27, 22, 0.14);
}

/* --- SEMANTIC, dark ------------------------------------------------------
   Designed, not inverted. The fill lifts two stops (clay-600 is 2.8:1 on a
   warm near-black and stops reading as a shape), the text tone three, and the
   tint moves to clay-900 so tinted surfaces stay surfaces.
   ------------------------------------------------------------------------- */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: var(--stone-900);
  --surface: var(--stone-800);
  --sunk: var(--stone-950);
  --ink: var(--ink-050);
  --ink-2: var(--ink-200);
  --ink-3: var(--ink-300);
  --line: var(--stone-700);
  --line-2: #28221C;
  --border-control: var(--ink-3);
  --ring-color: var(--ink);
  --accent: var(--clay-500);
  --accent-ink: #1A1714;
  --accent-text: var(--clay-400);
  --accent-on-tint: var(--clay-300);
  --accent-tint: var(--clay-900);
  --accent-shadow: var(--clay-800);
  --chart-1: var(--accent);
  --chart-2: var(--steel-500);
  --chart-3: var(--plum-500);
  --positive: var(--green-400);  --positive-tint: var(--green-950);
  --caution:  var(--amber-400);  --caution-tint:  var(--amber-950);
  --critical: var(--red-400);    --critical-tint: var(--red-950);
  --positive-ink: #1A1714;
  --caution-ink:  #1A1714;
  --critical-ink: #1A1714;
  --track: #2B241E;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.45);
  --elevation-2: 0 8px 26px rgba(0, 0, 0, 0.6);
}

/* --- COMPONENT ----------------------------------------------------------- */
:root {
  --button-bg: var(--accent);
  --button-ink: var(--accent-ink);
  --button-shadow: 0 2px 0 var(--accent-shadow);
  --button-weight: var(--weight-bold);
  --button-pad-y: 9px;
  --button-pad-x: 15px;

  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-shadow: var(--elevation-0);
  --card-pad: var(--space-4);

  --gauge-h: 9px;
  --gauge-rail: var(--track);
  --gauge-fill: var(--accent);
  --gauge-under: var(--caution);
  --gauge-mark: var(--ink);

  --lockup-mark: var(--accent);
  --lockup-letters: var(--ink);
  --lockup-period: var(--accent-text);
  --lockup-mark-scale: 1.37;
  --lockup-gap: 0.53em;
  --lockup-tracking: -0.045em;
  --lockup-weight: var(--weight-black);
}