/* =============================================================================
   Modelbot design tokens
   -----------------------------------------------------------------------------
   Nordic, light, typographic. Warm paper greys and one green ink.
   Nothing is #FFFFFF; nothing is #000000.

   This file is the spec. Generated from the design system in design/ — see
   design/readme.md for the reasoning and the measured accessibility ledger.
   ============================================================================= */

:root {
  /* ---- Base neutrals: warm paper greys ---------------------------------- */
  --paper-0: #FCFBF8;   /* raised surface, lightest */
  --paper-1: #F7F5F1;   /* page canvas */
  --paper-2: #F0EDE6;   /* sunken / alternate section tone */
  --paper-3: #E7E3DA;   /* deepest paper tone */

  --ink-900: #1B1C19;   /* near-black ink */
  --ink-700: #3A3C36;
  --ink-600: #4E5049;
  --ink-400: #6E7068;
  --ink-300: #B6B1A4;
  --ink-200: #D3CFC5;
  --ink-100: #E2DFD7;

  /* ---- Accent: muted forest green — pine, never mint -------------------- */
  --accent-700: #182D24;
  --accent-600: #223F32;
  --accent-500: #2C5140;
  --accent-300: #7C9A88;
  --accent-100: #DDE5E0;
  --accent-050: #EEF2EF;

  /* ---- Semantic ---------------------------------------------------------
     Success is pushed bluer than the forest accent so a green accent and a
     green success state never read as the same colour. */
  --green-600: #1D6A5F;
  --green-050: #E3EEEC;
  --amber-600: #8A6410;
  --amber-050: #F4EDDC;
  --red-600:   #9B2C24;
  --red-050:   #F3E5E3;

  /* ============================ Semantic aliases ========================= */

  /* Surfaces — maximum two background tones per page beyond the canvas. */
  --surface-canvas:      var(--paper-1);
  --surface-raised:      var(--paper-0);
  --surface-sunken:      var(--paper-2);
  --surface-deep:        var(--paper-3);
  --surface-inverse:     var(--ink-900);
  --surface-accent-wash: var(--accent-050);

  /* Text — three contrast levels, all AA on --surface-canvas */
  --text-strong:     var(--ink-900);   /* 14.9:1 */
  --text-body:       var(--ink-600);   /*  7.6:1 */
  --text-muted:      var(--ink-400);   /*  4.6:1 — the floor, never lighter */
  --text-inverse:    var(--paper-1);
  --text-on-accent:  #FFFFFF;          /*  8.91:1 on --accent-500 */
  --text-link:       var(--accent-500);/*  8.18:1 on --surface-canvas */
  --text-link-hover: var(--accent-600);

  /* Borders */
  --border-hairline: var(--ink-100);   /* section separators, list rows — the workhorse */
  --border-default:  var(--ink-200);   /* inputs, panels */
  --border-strong:   var(--ink-300);   /* hover, diagram plates */
  --border-ink:      var(--ink-900);   /* the one deliberate heavy rule */
  --border-accent:   var(--accent-500);

  /* Accent roles */
  --accent:        var(--accent-500);
  --accent-hover:  var(--accent-600);
  --accent-active: var(--accent-700);
  --accent-quiet:  var(--accent-100);
  --focus-ring:    var(--accent-500);

  /* Semantic roles */
  --success:         var(--green-600); /* 5.96:1 on canvas */
  --success-surface: var(--green-050);
  --warning:         var(--amber-600);
  --warning-surface: var(--amber-050);
  --error:           var(--red-600);   /* 6.98:1 on canvas */
  --error-surface:   var(--red-050);

  /* ============================ Typography =============================== */
  /* One grotesque carries display and UI; hierarchy comes from weight and
     size, not from switching family. */
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display-xl: 4rem;       /* 64 hero */
  --fs-display-l:  3rem;       /* 48 section opener */
  --fs-display-m:  2.25rem;    /* 36 statement paragraph, pull quote */
  --fs-display-s:  1.75rem;    /* 28 card headline */
  --fs-heading:    1.3125rem;  /* 21 component heading */
  --fs-body-l:     1.1875rem;  /* 19 lead paragraph */
  --fs-body:       1.0625rem;  /* 17 body */
  --fs-body-s:     0.9375rem;  /* 15 dense body, form help */
  --fs-meta:       0.8125rem;  /* 13 eyebrow, caption */
  --fs-micro:      0.6875rem;  /* 11 diagram labels */

  --lh-display:   1.06;
  --lh-display-m: 1.14;
  --lh-heading:   1.3;
  --lh-body:      1.65;
  --lh-tight:     1.4;

  --ls-display: -0.03em;  /* Archivo needs real negative tracking at display sizes */
  --ls-heading: -0.02em;
  --ls-body:    0;
  --ls-eyebrow: 0.14em;   /* uppercase mono eyebrows — the only uppercase in the system */
  --ls-mono:    0.02em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  600;     /* display sizes are set at 600, never 400 */

  --measure-prose: 66ch;
  --measure-lead:  52ch;

  /* ============================ Space ==================================== */
  --space-unit: 4px;
  --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-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max:    1180px;
  --container-narrow: 760px;
  --gutter:    24px;
  --gutter-lg: 40px;
  --grid-gap:  24px;

  /* Section vertical rhythm */
  --section-y:    var(--space-32);  /* desktop 128 */
  --section-y-lg: var(--space-40);  /* hero / feature 160 */
  --section-y-sm: var(--space-20);  /* mobile, quote band 80 */

  /* Shape — near-square, printed-matter feel */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-pill: 999px;

  --hairline:    1px;
  --rule-strong: 2px;

  /* Elevation: essentially none. */
  --shadow-none: none;
  --shadow-nav:  0 1px 0 0 var(--border-hairline);

  /* ============================ Motion =================================== */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --reveal-y: 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --reveal-y: 0px;
  }
}