/* SUMA — Color tokens
----------------------------------------------------------------
Two warm-neutral grounds (sand / cream) carry the brand; a forest-
to-sage green scale carries identity and data; cool grays serve the
live INSIGHT dashboard only. Gold is the one metal.

Sections:
  1. Brand Kit core
  2. Forest → sage scale · warm neutrals · UI grays
  3. Accent + signal (gold ramp, olive, terracotta)
  4. Cut-paper stocks — the eleven papers every scene is drawn from
  5. Editorial document layer (one-pagers, charters, proposals)
  6. Semantic aliases
Web-specific grounds, inks and hairlines live in tokens/web.css.
Updated Sep 2026 from the shipped website — see CHANGELOG.md. */

:root {
  /* ---- 1. Brand Kit core colors (official) ----------------------- */
  --deep-green: #10312a;  /* "Deep Green" — primary brand color */
  --warm-sand:  #dfd5c4;  /* "Warm Sand" — primary warm neutral */

  /* ---- 2a. Forest → sage green scale ----------------------------- */
  --green-950: #01221b;  /* deepest band — near-black green */
  --green-900: #10312a;  /* primary / wordmark green */
  --green-800: #173a30;
  --green-700: #28463e;  /* darkest chart bar */
  --green-600: #3f5a52;  /* dark chart bar */
  --green-500: #4d655d;  /* moss — labels, dashboard sidebar */
  --green-400: #6e8b7e;
  --green-300: #8ba58c;  /* sage — imagery, far hills */
  --green-200: #a9c0b0;
  --green-100: #cadbcf;
  --green-50:  #e7eee8;

  /* ---- 2b. Warm neutral: sand / cream ---------------------------- */
  --sand-50:  #faf8f2;  /* lightest paper */
  --sand-100: #f4f0e6;
  --sand-200: #eeebe1;  /* legacy deck ground */
  --sand-250: #e5dbc6;  /* THE cream band — primary light ground on the web, sheets and slides. Prefer over --sand-300 next to green. */
  --sand-300: #dfd5c4;  /* = Warm Sand; report cream band */
  --sand-400: #c9c3ab;  /* taupe */
  --sand-500: #b4a98c;
  --cream-logo: #e6dcc8; /* wordmark and headlines on forest */

  /* ---- 2c. Cool UI grays (INSIGHT dashboard only) ---------------- */
  --white:    #ffffff;
  --gray-50:  #fafafa;
  --gray-100: #f2f3f2;
  --gray-200: #e6e8e6;  /* hairline borders */
  --gray-300: #d4d7d5;
  --gray-400: #b3bdbb;  /* light chart bar */
  --gray-500: #8c9491;
  --gray-600: #767676;  /* muted UI text */
  --gray-700: #4a4f4d;
  --ink:      #1c2421;  /* warm near-black */

  /* ---- 3. Accent + signal ---------------------------------------- */
  --olive: #727862;     /* quiet warm olive */
  --gold:  #a98c5a;     /* the one metal — used sparingly */
  /* Gold ramp: deeper on cream, brighter on green. */
  --gold-600: #9c7f4d;  /* eyebrows, numerals, rules ON CREAM */
  --gold-500: #a98c5a;  /* = --gold; lit windows in scenes */
  --gold-300: #c8a766;  /* bright gold — figures, nav underline, sun disc ON GREEN */
  --gold-200: #c9a67e;  /* eyebrow text ON FOREST */
  --gold-100: #d8b87c;  /* links on forest ("Explore CHARTER →") */
  --terra: #9e4b33;     /* terracotta — one accent per scene; strike-reframe line */
  /* Signal/priority colors — restrained, for data states only. */
  --signal-positive: #4d655d;
  --signal-watch:    #a98c5a;
  --signal-urgent:   #9e4b33;

  /* ---- 4. Cut-paper stocks ----------------------------------------
     Every cut-paper scene is drawn ONLY from these eleven papers plus
     one skin stock; any other tone is a mix(a,b,t) blend of two of
     them. Light scenes blend toward cream2, dark scenes toward
     --paper-ink (#08231c). Spec: guidelines/cut-paper.md. */
  --paper-deep:   #10312a;  /* forest, primary ink, building bodies */
  --paper-moss:   #4d655d;  /* mid greens */
  --paper-sage:   #8ba58c;  /* foliage, far hills */
  --paper-olive:  #727862;  /* awnings, foreground band */
  --paper-sand:   #dfd5c4;  /* warm neutral, plazas, near hill */
  --paper-cream:  #f0e9d8;  /* paper stock */
  --paper-cream2: #f7f1e5;  /* lightest paper, light-scene ground */
  --paper-gold:   #a98c5a;  /* lit windows, signage */
  --paper-gold2:  #c8a766;  /* sun disc, hard hats */
  --paper-terra:  #9e4b33;  /* exactly one accent per scene */
  --paper-night:  #0a2620;  /* night ground */
  --paper-night2: #01221b;  /* deepest night ground */
  --paper-skin:   #d9b98c;  /* the single stock for all people */
  --paper-ink:    #08231c;  /* dark-scene blend target (NK) */

  /* ---- 5. Editorial document layer --------------------------------
     The shared palette of charters, one-pagers, proposals and the
     website. Deep forest ground + warm sheet + gold accents. */
  --ground:         #08231c;  /* document/website forest ground (deeper than --green-900) */
  --ground-2:       #0c2a22;  /* slightly lifted forest (alt dark band) */
  --on-green-cream: #e6dcc8;  /* headlines + logo on forest */
  --on-green-body:  #cabfa3;  /* running copy on forest */
  --on-green-soft:  #a6ad9d;  /* secondary text on forest; nav links */
  --sage:           #8fa396;  /* small labels, rules, em-accents on forest */
  --cream-bg:       #e5dbc6;  /* sheet / band ground (= --sand-250) */
  --card-cream:     #f0e9d8;  /* card on sheet; menu panels */
  --card-cream-2:   #f7f1e5;  /* lightest card / page tint */
  --card-active:    #f8f3e8;  /* card hover */
  --ink-title:      #10312a;  /* headings on cream */
  --ink-body:       #2f3833;  /* body on cream */
  --ink-secondary:  #4a534d;  /* secondary body on cream */
  --ink-muted:      #69705f;  /* muted on cream */
  --ink-menu:       #77806b;  /* menu descriptions */
  --label:          #4d655d;  /* small labels on cream */
  --hair:           #cdc1a4;  /* hairline on cream */
  --hair-soft:      #dccfb5;  /* softer hairline on cream */
  --hair-green:     rgba(255,255,255,0.14); /* hairline on forest */
  --outline-sand:   #b9ab88;  /* secondary button outline on cream */

  /* ================================================================
     6. SEMANTIC ALIASES — prefer these in components & layouts
     ================================================================ */
  /* Surfaces */
  --surface-page:      var(--sand-250);  /* web / editorial ground */
  --surface-editorial: var(--sand-250);
  --surface-app:       var(--gray-50);   /* live dashboard ground */
  --surface-card:      var(--white);
  --surface-raised:    var(--sand-50);
  --surface-sunken:    var(--gray-100);
  --surface-dark:      var(--green-900);
  --surface-deepest:   var(--green-950);
  --surface-sage:      var(--green-500);
  --surface-cream:     var(--sand-300);
  --surface-paper:     var(--card-cream-2);

  /* Text */
  --text-primary:       var(--green-900);
  --text-body:          #2c342f;
  --text-muted:         var(--gray-600);
  --text-faint:         var(--gray-500);
  --text-on-dark:       var(--sand-200);
  --text-on-dark-muted: #9bada4;
  --text-accent:        var(--green-600);
  --text-eyebrow:       var(--gold-600);
  --text-eyebrow-on-dark: var(--gold-200);

  /* Lines & borders */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-dark:   rgba(255,255,255,0.14);
  --border-cream:  #cfc6ad;

  /* Interactive */
  --focus-ring: rgba(77,101,93,0.45);
}