/* ============================================================
   ZEROTUDE — Color tokens
   Source of truth: Zerotude Brand Identity 2.0 (2026) / Handover.
   "One hot orange against a monochrome coal / dust / off-white system.
    Orange is a signal — never a flood."
   ============================================================ */

:root {
  /* ---------- 1. Primary palette (canonical) ---------- */
  --color-orange:       #F64E29;  /* Accent / brand signal — use sparingly */
  --color-coal:         #0F0E0E;  /* Primary dark / dark-mode base, text */
  --color-dust:         #E6E4E0;  /* Warm neutral / surfaces, dividers */
  --color-linen:        #EBE8E3;  /* Warm neutral (light) — between dust & white smoke */
  --color-white-smoke:  #F7F7F6;  /* Light-mode base / off-white surface */
  --color-white:        #FFFFFF;  /* Pure white / max-contrast surface */

  /* ---------- 2. Derived tints (oklch-harmonized — hover/borders/states) ---------- */
  --color-orange-700:   #D63B18;  /* pressed / darker accent */
  --color-orange-100:   #FBE0D8;  /* faint accent wash */
  --color-coal-80:      #2A2928;  /* raised dark surface */
  --color-coal-60:      #4A4948;  /* muted dark text */
  --color-dust-dark:    #D4D1CB;  /* divider on off-white */
  --color-ink-60:       #5B5957;  /* secondary text on light */
  --color-ink-40:       #8C8A86;  /* tertiary / placeholder */

  /* ---------- 3. Metrics scale — energy class A→G  [TBD: confirm w/ brand] ----------
     Data-viz, status chips and class badges ONLY — never UI chrome. */
  --metric-a: #1FA140;  /* best  — deep green */
  --metric-b: #5DBB46;
  --metric-c: #A8CF4C;
  --metric-d: #F4D03F;  /* mid   — yellow */
  --metric-e: #F0A030;
  --metric-f: #EE6A2C;
  --metric-g: #E23B2E;  /* worst — red */

  /* ---------- 4. Semantic tokens (LIGHT MODE — default) ----------
     Always build against these, not the raw palette — that's what
     makes light/dark theming work for free.

     LIGHT-FIRST (v2.2): light is the standard surface for the whole
     product — pages, sections AND heroes. Dark is a punctuation mark,
     not a mode you design toward: use it to break up a page for a CTA
     band, a stat/quote band or a footer. Reach for it once, maybe twice
     per page. Scope it with data-theme="dark" on that ONE section (see
     block 5) — do not flip the page root to get a dark hero. */
  --surface:         var(--color-white-smoke);  /* page base */
  --surface-raised:  var(--color-white);         /* cards / panels */
  --surface-alt:     var(--color-dust);          /* alt sections, fills */
  --surface-inverse: var(--color-coal);          /* dark blocks on light pages */
  --border:          var(--color-dust-dark);     /* #D4D1CB hairline */
  --border-strong:   var(--color-coal);          /* Swiss outline emphasis */
  --fg1:             var(--color-coal);           /* primary text */
  --fg2:             var(--color-ink-60);         /* secondary text */
  --fg3:             var(--color-ink-40);         /* tertiary / placeholder */
  --fg-inverse:      var(--color-white-smoke);    /* text on dark */
  --accent:          var(--color-orange);
  --accent-hover:    var(--color-orange-700);     /* #D63B18 */
  --accent-wash:     var(--color-orange-100);     /* #FBE0D8 */
  --focus-ring:      var(--color-orange);
}

/* ---------- 5. Dark — full mode OR a single scoped band ----------
   Same token set works at two scales:
     :root[data-theme="dark"]  → the whole page (product dark mode)
     <section data-theme="dark"> → ONE dark band on a light page (the
     light-first default: CTA band, stat band, footer). The section
     paints its own surface/fg, so children keep using --surface/--fg1
     and invert for free. */
:root[data-theme="dark"],
[data-theme="dark"] {
  --surface:         var(--color-coal);
  --surface-raised:  #1A1918;
  --surface-alt:     #1A1918;
  --surface-inverse: var(--color-white-smoke);
  --border:          #2A2928;
  --border-strong:   var(--color-dust);
  --fg1:             var(--color-white-smoke);
  --fg2:             #A8A6A2;
  --fg3:             #6E6C69;
  --fg-inverse:      var(--color-coal);
  --accent:          var(--color-orange);
  --accent-hover:    #FF6A47;
  --accent-wash:     rgba(246, 78, 41, 0.14);
}