/* SUMA — Color tokens
   ----------------------------------------------------------------
   Two warm-neutral grounds (sand / cream) carry the editorial brand;
   a forest-to-sage green scale carries identity and data; cool grays
   serve the live dashboard UI. Sampled from the SUMA wordmark, the
   INSIGHT dashboard, and the paper-cut brand imagery. */

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

  /* ---- 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; /* dashboard sidebar */
  --green-400: #6e8b7e;
  --green-300: #8ba58c; /* imagery mid sage */
  --green-200: #a9c0b0;
  --green-100: #cadbcf;
  --green-50:  #e7eee8;

  /* ---- Warm neutral: sand / cream ------------------------------- */
  --sand-50:  #faf8f2; /* lightest paper */
  --sand-100: #f4f0e6;
  --sand-200: #eeebe1; /* deck / marketing ground */
  --sand-250: #e5dbc6; /* editorial panel ground — the warm sand used for one-pager sheets AND deck slide grounds. Lighter than --sand-300; against deep-green it reads as clean warm sand, not pink. Prefer this over --sand-300 for large light fields next to green. */
  --sand-300: #dfd5c4; /* report cream band */
  --sand-400: #c9c3ab; /* taupe */
  --sand-500: #b4a98c;
  --cream-logo: #e6dcc8; /* logo on dark ground */

  /* ---- Cool UI grays (dashboard) -------------------------------- */
  --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 */

  /* ---- Accent + signal ------------------------------------------ */
  --olive:    #727862; /* quiet warm-olive accent (INSIGHT lockup) */
  --gold:     #a98c5a; /* sparing metallic warm accent */
  /* Gold ramp — the editorial gold family that emerged across the
     one-pagers, proposals and website. Deeper on cream, brighter on green. */
  --gold-600: #9c7f4d; /* editorial gold — eyebrows, numerals, rules ON CREAM */
  --gold-500: #a98c5a; /* = --gold */
  --gold-300: #c8a766; /* bright gold — big figures / metrics ON DEEP GREEN */
  --gold-200: #c9a67e; /* gold eyebrow text ON DEEP GREEN */
  /* Signal/priority colours — restrained, harmonised with palette.
     Terracotta is an inferred accent (no red appears in source). */
  --signal-positive: #4d655d;
  --signal-watch:    #a98c5a;
  --signal-urgent:   #9e4b33;

  /* ================================================================
     EDITORIAL DOCUMENT LAYER — the shared palette of the one-pagers,
     proposals, and website (docs no longer need a local :root block).
     Deep forest ground + warm sheet + gold accents. See readme.md →
     "EDITORIAL DOCUMENTS".
     ================================================================ */
  --ground:         #08231c; /* document/website forest ground (deeper than --green-900) */
  --ground-2:       #0c2a22; /* slightly lifted forest (footers, alt dark band) */
  --on-green-cream: #e6dcc8; /* headlines + logo on forest (= --cream-logo) */
  --on-green-body:  #cabfa3; /* running copy on forest */
  --on-green-soft:  #a6ad9d; /* muted/soft text on forest */
  --sage:           #8fa396; /* labels, rules, em-accents on forest */
  --cream-bg:       #e5dbc6; /* sheet / band ground (= --sand-250) */
  --card-cream:     #f0e9d8; /* card on sheet */
  --card-cream-2:   #f7f1e5; /* lighter card / frame tint */
  --card-active:    #f8f3e8; /* card hover */
  --ink-title:      #10312a; /* titles on cream (= --green-900) */
  --ink-body:       #2f3833; /* body on cream */
  --ink-muted:      #69705f; /* muted on cream */
  --label:          #4d655d; /* uppercase labels on cream (= --green-500) */
  --hair:           #cdc1a4; /* hairline on cream */
  --hair-soft:      #dccfb5; /* softer hairline on cream */
  --hair-green:     rgba(255,255,255,0.14); /* hairline on forest (= --border-dark) */

  /* ================================================================
     SEMANTIC ALIASES — prefer these in components & layouts
     ================================================================ */

  /* Surfaces */
  --surface-page:     var(--sand-200); /* editorial / marketing ground */
  --surface-editorial: var(--sand-250); /* warm-sand ground for large light slides/sheets sitting amid deep green (decks + one-pagers) */
  --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);

  /* Text */
  --text-primary:   var(--green-900);
  --text-body:      #2c342f; /* warm ink-green for running copy */
  --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);

  /* 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);
}