/* SUMA — Web layer tokens
----------------------------------------------------------------
The values the shipped website (Sep 2026, 90 pages) actually uses.
Imported by styles.css. Where a value here and a legacy token differ,
the web value wins for web work.

  Grounds    max TWO background colors per page; neighbors always differ
  Ink        on light / on forest
  Gold       eyebrows, accents, links
  Lines      hairlines, outlines, panels
  Layout     column, gutter, section rhythm, chrome
  Motion     easing, durations, auto-advance cadences
  Grain      gradient recipes (pair with .suma-grain in web/site.css)
  Hero bands the ground bands every hero graphic stands on          */

:root {
  /* ---- Grounds -------------------------------------------------- */
  --web-cream:  #e5dbc6;  /* primary light band */
  --web-paper:  #f0e9d8;  /* paper band, menu panels */
  --web-light:  #f7f1e5;  /* lightest band: stages, values, sheets */
  --web-forest: #10312a;  /* forest band */
  --web-night:  #08231c;  /* chrome, footer, deepest band */
  --web-deep:   #01221b;  /* darkest grain start */

  /* ---- Ink on light --------------------------------------------- */
  --web-ink-heading:   #10312a;
  --web-ink-body:      #2f3833;
  --web-ink-secondary: #4a534d;
  --web-ink-menu:      #77806b;
  --web-ink-label:     #4d655d;
  --web-ink-muted:     #69705f;

  /* ---- Ink on forest -------------------------------------------- */
  --web-on-dark:           #e6dcc8;  /* headlines, primary */
  --web-on-dark-body:      #cabfa3;  /* running copy, footer links */
  --web-on-dark-secondary: #a6ad9d;  /* nav links, secondary */
  --web-on-dark-label:     #8fa396;  /* small labels */

  /* ---- Gold ----------------------------------------------------- */
  --web-eyebrow:         #9c7f4d;  /* eyebrow on light */
  --web-eyebrow-on-dark: #c9a67e;  /* eyebrow on forest */
  --web-accent:          #c8a766;  /* nav underline, numerals, dots on forest */
  --web-link-on-dark:    #d8b87c;  /* "Explore CHARTER →" */
  --web-gold-rule:       #a98c5a;

  /* ---- Lines & panels ------------------------------------------- */
  --web-hair:          #cdc1a4;                   /* hairline on light */
  --web-hair-soft:     #dccfb5;
  --web-hair-dark:     rgba(230,220,200,0.18);    /* hairline on forest */
  --web-hair-chrome:   rgba(255,255,255,0.13);    /* under the nav bar */
  --web-outline:       #b9ab88;                   /* secondary button outline on light */
  --web-outline-dark:  rgba(230,220,200,0.42);    /* secondary button outline on forest */
  --web-panel:         #f0e9d8;
  --web-panel-border:  #ddd1b6;
  --web-panel-divider: #e2d7bd;
  --web-panel-wash:    rgba(16,49,42,0.05);       /* active menu item */
  --web-panel-hover:   rgba(16,49,42,0.06);

  /* ---- Layout --------------------------------------------------- */
  --web-column:     1240px;
  --web-gutter:     clamp(20px, 4vw, 56px);  /* @kind spacing */
  --web-section-y:  clamp(76px, 9.5vw, 130px);  /* @kind spacing */
  --web-hero-top:   clamp(56px, 7vw, 104px);  /* @kind spacing */
  --web-nav-h:      80px;
  --web-nav-h-scrolled: 64px;
  --web-chrome-bg:  rgba(8,35,28,0.94);
  --web-wordmark-h: 21px;

  /* ---- Radii ---------------------------------------------------- */
  --web-radius-pill:  999px;
  --web-radius-panel: 12px;
  --web-radius-menu:  8px;
  --web-radius-frame: 6px;
  --web-radius-paper: 3px;

  /* ---- Motion --------------------------------------------------- */
  --web-ease:          cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */
  --web-dur-hover:     160ms;  /* @kind other */
  --web-dur-underline: 260ms;  /* @kind other */
  --web-dur-chrome:    360ms;  /* @kind other */
  --web-dur-panel:     240ms;  /* @kind other */
  --web-dur-card:      420ms;  /* @kind other */
  --web-dur-grain:     650ms;  /* @kind other */
  --web-dur-reveal:    700ms;  /* @kind other */
  /* Auto-advance cadences — slow and readable; hover pauses/resets. */
  --cadence-home-highlights: 9s;    /* @kind other */
  --cadence-imagine:         4s;    /* @kind other */
  --cadence-difference:      20s;   /* @kind other */
  --cadence-stage:           5s;    /* @kind other */
  --cadence-stage-touch:     5.2s;  /* @kind other */
  --cadence-contributions:   4.2s;  /* @kind other */
  --cadence-rotating-word:   3.6s;  /* @kind other */
  --cadence-charter-pages:   15s;   /* @kind other */

  /* ---- Grain gradients -------------------------------------------
     Always paired with the white grain tile (140px, overlay, .8) on
     dark, or the ink tile (multiply, ~.6) on light — see web/site.css
     .suma-grain. Named for where they run on the site. */
  --grain-forest-gold:  linear-gradient(152deg, #01221b 0%, #123c30 34%, #2f5f4c 68%, #6f8570 96%, #c8a766 130%);  /* @kind color */
  --grain-forest-sage:  linear-gradient(152deg, #0b2a24 0%, #1c453a 34%, #4d655d 68%, #8ba58c 100%, #cfd8cd 130%);  /* @kind color */
  --grain-forest-sand:  linear-gradient(152deg, #10312a 0%, #3d584d 36%, #7f9a83 70%, #c9b487 104%, #e5dbc6 130%);  /* @kind color */
  --grain-forest-brass: linear-gradient(152deg, #01221b 0%, #10312a 30%, #3d584d 62%, #a98c5a 100%, #dfd5c4 130%);  /* @kind color */
  --grain-forest-ember: linear-gradient(152deg, #08231c 0%, #123c30 32%, #4d655d 64%, #9c7f4d 98%, #c8a766 130%);  /* @kind color */
  --grain-slate:        linear-gradient(152deg, #16211c 0%, #2f3833 34%, #5c6a60 68%, #8a917f 96%, #b9ab88 130%);  /* @kind color */
  --grain-imagine:      linear-gradient(28deg, #01221b 0%, #10312a 30%, #3d584d 58%, #6f8570 82%, #a98c5a 124%);  /* @kind color */
  --grain-night:        linear-gradient(160deg, #03170f 0%, #08231c 38%, #10312a 72%, #1a4437 100%);  /* @kind color */
  /* Capability cards on light sections (forest text) */
  --grain-cap-charter:  linear-gradient(152deg, #0f2e27 0%, #1f4a3c 45%, #6b5a3a 120%);  /* @kind color */
  --grain-cap-insight:  linear-gradient(152deg, #01221b 0%, #2a4a3d 48%, #7f9a83 125%);  /* @kind color */
  --grain-cap-connect:  linear-gradient(152deg, #10312a 0%, #3d584d 50%, #b39a6c 130%);  /* @kind color */
  /* Capability cards on forest sections (beige-dominant) */
  --grain-cap-light-gold:  linear-gradient(152deg, #f3ead6 0%, #e2d5b6 55%, #c8a766 130%);  /* @kind color */
  --grain-cap-light-sage:  linear-gradient(152deg, #f3ead6 0%, #dfd8c0 55%, #8ba58c 135%);  /* @kind color */
  --grain-cap-light-olive: linear-gradient(152deg, #f3ead6 0%, #e4dcc6 55%, #a9a48a 135%);  /* @kind color */
  /* States */
  --grain-hover-bronze: linear-gradient(148deg, #4b4e3f 0%, #857d61 100%);  /* @kind color */  /* result tile / row hover */
  --grain-open-forest:  linear-gradient(148deg, #0a2620 0%, #2a4f40 100%);  /* @kind color */  /* result tile open */
  --grain-card-bronze:  linear-gradient(225deg, #857d61 0%, #6a6b55 48%, #4b4e3f 100%);  /* @kind color */
  --grain-card-forest:  linear-gradient(225deg, #25493c 0%, #163a30 48%, #0c2a22 100%);  /* @kind color */
  /* Light heroes */
  --grain-meadow: linear-gradient(148deg, #f6f0de 0%, #e9e2ca 30%, #d9d5b4 58%, #c9d2ae 82%, #b9c9a3 100%);  /* @kind color */ /* business heroes */
  --grain-dawn:   linear-gradient(148deg, #f7f1e5 0%, #efe9d6 34%, #e4e5cf 62%, #d8dfc8 86%, #cfd9c0 100%);  /* @kind color */ /* Talk with Us */
  --grain-sand:   linear-gradient(152deg, #f0e9d8 0%, #e5dbc6 52%, #dacfb6 100%);  /* @kind color */                          /* "How the system works" rows */
  --grain-gold-text: linear-gradient(180deg, #c9ab6d 0%, #a98c5a 52%, #7d6236 100%);  /* @kind color */                      /* EXPERIENCE letters */

  /* ---- Hero ground bands -------------------------------------------
     Every hero graphic stands on full-width layered bands (min three). */
  --band-dark-1: #3f5f4f;  /* far hill on forest heroes */
  --band-dark-2: #335547;
  --band-dark-3: #2a4a3d;  /* lawn — continues the scene's own lawn */
  --band-dark-strip: #224034;
  --band-sage-1: #8ba58c;  /* rolling sage layers (Company hero) */
  --band-sage-2: #7f9a84;
  --band-sage-3: #4f6d5c;
  --band-sage-front: #22463a;
}