/* ==========================================================================
   Volga Task Services — 2026-09 "human polish" design tokens
   ONE semantic layer. No generation numbers. Codex ports this file verbatim
   as public/assets/vlg-tokens.css and deletes nothing until the migration
   order in 15_CODEX_HANDOFF.md is complete.

   Rules that make this different from v2/v5/v7/v8:
   1. Every colour a component uses is a SEMANTIC token (surface / text /
      border / accent), never a raw hex and never a palette token like
      --carbon. Raw palette values appear ONLY in this file.
   2. Dark mode redefines the SAME token names. A component never carries a
      `[data-theme="dark"]` rule of its own.
   3. A section that needs a different ground does NOT hard-code a colour.
      It re-declares the token set locally (.band--feature below). That is
      the fix for `.v8-band--carbon` staying black in light mode and
      collapsing into the page background in dark mode.
   ========================================================================== */

:root {
  /* ---- brand palette (raw values live only here) ---- */
  --vlg-green-900:#062E28;
  --vlg-green-800:#0A463D;
  --vlg-green-700:#0C5C50;   /* primary brand green */
  --vlg-green-600:#127565;
  --vlg-green-300:#5FC7B6;
  --vlg-green-200:#8FDCCE;
  --vlg-green-50:#E4EFEA;

  --vlg-ink-950:#080C0B;
  --vlg-ink-900:#0E1413;
  --vlg-ink-800:#18201F;
  --vlg-ink-700:#232D2B;
  --vlg-ink-600:#3A4644;

  --vlg-warm-50:#FFFFFF;
  --vlg-warm-100:#FAF8F4;
  --vlg-warm-200:#F4F2EC;
  --vlg-warm-300:#EAE7DF;
  --vlg-warm-400:#DCD8CE;
  --vlg-warm-500:#B9B3A6;

  /* ---- semantic roles: LIGHT ---- */
  --page-bg:            var(--vlg-warm-200);
  --surface:            var(--vlg-warm-50);
  --surface-raised:     var(--vlg-warm-50);
  --surface-muted:      var(--vlg-warm-300);
  --heading:            #0B100F;
  --text:               #232A28;
  --text-muted:         #56605D;
  --text-faint:         #5A6461;
  --border:             var(--vlg-warm-400);
  --border-strong:      var(--vlg-warm-500);
  --accent:             var(--vlg-green-700);
  --accent-hover:       var(--vlg-green-800);
  --accent-soft:        var(--vlg-green-50);
  --accent-on:          #FFFFFF;

  --primary-button-bg:      var(--vlg-green-700);
  --primary-button-bg-hover:var(--vlg-green-800);
  --primary-button-text:    #FFFFFF;
  --primary-button-border:  var(--vlg-green-700);
  --secondary-button-bg:        transparent;
  --secondary-button-text:      var(--heading);
  --secondary-button-border:    var(--text-muted);
  --secondary-button-bg-hover:  var(--surface-muted);

  /* over-photography roles — identical in both themes, because a photograph
     is a photograph. These are the ONLY fixed light values in the system. */
  --on-media-heading:#FFFFFF;
  --on-media-strong:#F5F3EE;
  --on-media-text:#D9E0DE;
  --on-media-muted:#B6C0BD;
  --on-media-faint:#93A09C;
  --on-media-border:rgba(255,255,255,.16);
  --on-media-border-strong:rgba(255,255,255,.34);
  --on-media-hover:rgba(255,255,255,.10);
  --scrim:rgba(8,12,11,.55);
  --scrim-strong:rgba(8,12,11,.78);
  --scrim-soft:rgba(8,12,11,.34);
  --glass:rgba(10,15,14,.62);

  --hero-overlay-top:    rgba(8,12,11,.30);
  --hero-overlay-bottom: rgba(8,12,11,.86);
  --media-caption:       var(--text-faint);

  --success:#1B6E45;  --success-soft:#E3F1E9;
  --warning:#8A5A00;  --warning-soft:#FBF0DC;
  --error:#A32020;    --error-soft:#FBE7E7;
  --focus-ring:var(--vlg-green-700);

  /* the one "feature" ground — dark in light theme, RAISED in dark theme */
  --feature-bg:      var(--vlg-ink-900);
  --feature-surface: #16201E;
  --feature-heading: #F5F3EE;
  --feature-text:    #C9D1CE;
  --feature-muted:   #9AA5A1;
  --feature-border:  rgba(255,255,255,.14);
  --feature-accent:  var(--vlg-green-200);
  --feature-focus:   var(--vlg-green-200);

  /* footer is always the deep ground, in both themes, but tokenised */
  --footer-bg:      var(--vlg-ink-950);
  --footer-heading: #F5F3EE;
  --footer-text:    #AEB8B5;
  --footer-border:  rgba(255,255,255,.12);
  --footer-accent:  var(--vlg-green-200);

  /* ---- geometry & motion ---- */
  --radius-sm:4px; --radius:6px; --radius-lg:10px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(11,16,15,.05);
  --shadow-2:0 1px 2px rgba(11,16,15,.05), 0 10px 24px -18px rgba(11,16,15,.35);
  --shadow-3:0 2px 4px rgba(11,16,15,.06), 0 22px 48px -24px rgba(11,16,15,.40);
  --dur-1:150ms; --dur-2:240ms; --dur-3:380ms; --dur-4:520ms;
  --ease:cubic-bezier(.2,.7,.25,1);

  --container:1200px;
  --container-wide:1360px;
  --measure:68ch;

  /* ---- type ---- */
  --font-sans:'Archivo','ArchivoFallback',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(2.35rem,1.55rem + 2.7vw,3.5rem);
  --fs-h1:clamp(2.0rem,1.45rem + 1.9vw,2.9rem);
  --fs-h2:clamp(1.55rem,1.25rem + 1.05vw,2.1rem);
  --fs-h3:clamp(1.14rem,1.06rem + .32vw,1.34rem);
  --fs-lead:clamp(1.06rem,1.01rem + .22vw,1.19rem);
  --fs-body:1.0625rem;   /* 17px */
  --fs-small:0.9375rem;  /* 15px */
  --fs-micro:0.75rem;    /* 12px, uppercase only */
  --lh-display:1.06; --lh-heading:1.16; --lh-body:1.62;

  color-scheme:light;
}

/* ---- semantic roles: DARK ---------------------------------------------- */
:root[data-theme="dark"] {
  --page-bg:        #0D1211;
  --surface:        #141A19;
  --surface-raised: #1A2220;
  --surface-muted:  #101615;
  --heading:        #F3F1EC;
  --text:           #D7DCDA;
  --text-muted:     #9EA8A5;
  --text-faint:     #7E8886;
  --border:         #263130;
  --border-strong:  #3C4A47;
  --accent:         var(--vlg-green-300);
  --accent-hover:   var(--vlg-green-200);
  --accent-soft:    #12312C;
  --accent-on:      #04211D;

  --primary-button-bg:      var(--vlg-green-300);
  --primary-button-bg-hover:var(--vlg-green-200);
  --primary-button-text:    #04211D;
  --primary-button-border:  var(--vlg-green-300);
  --secondary-button-text:  var(--heading);
  --secondary-button-border:var(--text-muted);
  --secondary-button-bg-hover:var(--surface-raised);

  --hero-overlay-top:    rgba(4,7,7,.42);
  --hero-overlay-bottom: rgba(4,7,7,.90);

  --success:#5CC08C;  --success-soft:#10261C;
  --warning:#E0A94A;  --warning-soft:#2A2113;
  --error:#EE7A7A;    --error-soft:#2C1616;
  --focus-ring:var(--vlg-green-200);

  /* THE IMPORTANT ONE: in dark, the feature band is a RAISED surface, so the
     page keeps its rhythm instead of every band collapsing to the same black. */
  --feature-bg:      #18201F;
  --feature-surface: #1F2927;
  --feature-heading: var(--heading);
  --feature-text:    var(--text);
  --feature-muted:   var(--text-muted);
  --feature-border:  #2C3836;
  --feature-accent:  var(--vlg-green-300);
  --feature-focus:   var(--vlg-green-200);

  --footer-bg:      #080C0B;
  --footer-heading: #F3F1EC;
  --footer-text:    #A7B1AE;
  --footer-border:  rgba(255,255,255,.10);
  --footer-accent:  var(--vlg-green-300);

  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 1px 2px rgba(0,0,0,.40), 0 10px 24px -18px rgba(0,0,0,.75);
  --shadow-3:0 2px 4px rgba(0,0,0,.45), 0 22px 48px -24px rgba(0,0,0,.80);

  color-scheme:dark;
}

/* System preference, only when the visitor has not chosen. Mirrors the dark
   block above; keep the two in sync (Codex: generate, do not hand-edit). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg:#0D1211; --surface:#141A19; --surface-raised:#1A2220; --surface-muted:#101615;
    --heading:#F3F1EC; --text:#D7DCDA; --text-muted:#9EA8A5; --text-faint:#7E8886;
    --border:#263130; --border-strong:#3C4A47;
    --accent:var(--vlg-green-300); --accent-hover:var(--vlg-green-200);
    --accent-soft:#12312C; --accent-on:#04211D;
    --primary-button-bg:var(--vlg-green-300); --primary-button-bg-hover:var(--vlg-green-200);
    --primary-button-text:#04211D; --primary-button-border:var(--vlg-green-300);
    --secondary-button-text:var(--heading); --secondary-button-border:#9EA8A5;
    --secondary-button-bg-hover:#1A2220;
    --hero-overlay-top:rgba(4,7,7,.42); --hero-overlay-bottom:rgba(4,7,7,.90);
    --success:#5CC08C; --success-soft:#10261C; --warning:#E0A94A; --warning-soft:#2A2113;
    --error:#EE7A7A; --error-soft:#2C1616; --focus-ring:var(--vlg-green-200);
    --feature-bg:#18201F; --feature-surface:#1F2927; --feature-heading:#F3F1EC;
    --feature-text:#D7DCDA; --feature-muted:#9EA8A5; --feature-border:#2C3836;
    --feature-accent:var(--vlg-green-300); --feature-focus:var(--vlg-green-200);
    --footer-bg:#080C0B; --footer-heading:#F3F1EC; --footer-text:#A7B1AE;
    --footer-border:rgba(255,255,255,.10); --footer-accent:var(--vlg-green-300);
    --shadow-1:0 1px 2px rgba(0,0,0,.40);
    --shadow-2:0 1px 2px rgba(0,0,0,.40), 0 10px 24px -18px rgba(0,0,0,.75);
    --shadow-3:0 2px 4px rgba(0,0,0,.45), 0 22px 48px -24px rgba(0,0,0,.80);
    color-scheme:dark;
  }
}