/* ============================================================================
   CostMeHours — shared design tokens (colors)
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the color palette shared by BOTH the app and the
   marketing website (revision brief v2.2.0, sections 3.3 + 3.4).

   Canonical copy lives in the app repo at: styles/design-tokens.css
   The website ships an identical copy at:  public/design-tokens.css

   Do not edit the website copy by hand. Edit this file, then run
   scripts/sync-design-tokens.mjs (or run-sync-tokens.bat) to copy it over, so
   the two never drift. Only colors live here; fonts, spacing, radius and
   shadows stay in each project's own stylesheet.

   Every text/background pair below is checked to WCAG AA (>= 4.5:1 for body
   text) — see scripts/check-contrast.mjs.
   ========================================================================== */

:root {
  /* --- Structural darks (hero, footer, always-dark panels) --- */
  --navy:      #1C1F26;   /* Deep Slate */
  --navy-mid:  #2B313B;   /* Slate Charcoal — hovers, gradients */
  --navy-soft: #3D4754;   /* Steel Slate — secondary dark backgrounds */

  /* --- Teal family (links, buttons, icons, accents) --- */
  --blue:      #134C4F;   /* Slate Teal — links, buttons, icons */
  --cyan:      #5CA1A6;   /* Soft Teal — highlights and accents */
  --cyan-soft: #8FC8CC;   /* Mist Teal — hover glow, subtle effects */
  --cyan-deep: #0E6B70;   /* Ocean Teal — active elements */
  --sage:      #5CA1A6;   /* alias of Soft Teal (app legacy name) */

  /* --- Accent fill (CTAs, badges, strong rules) --- */
  --accent:       #134C4F; /* Slate Teal fill */
  --accent-hover: #0E6B70; /* Ocean Teal on hover */
  --on-accent:    #FBFBF9; /* Soft Ivory text on the accent fill */

  /* --- Gold (premium accents) --- */
  --gold:      #D4AF37;   /* Brushed Gold — premium accents / eyebrows on dark */
  --gold-lt:   #E3BF58;   /* Warm Gold — hover / brighter on dark */
  --gold-ink:  #6E5A16;   /* gold as TEXT on light surfaces (AA on ivory) */

  /* --- Foreground text --- */
  --heading:   #1C1F26;   /* Rich Slate — main headings (theme-adaptive) */
  --ink:       #343A40;   /* Graphite — body text */
  --muted:     #5F6772;   /* Cool Gray, darkened from #6F7885 to clear AA */
  --muted-lt:  #646C78;   /* Silver Gray, darkened from #98A3AF to clear AA */

  /* --- Surfaces --- */
  --white:     #FBFBF9;   /* Soft Ivory — main background */
  --paper:     #FFFFFF;   /* Pure White — cards */
  --wash:      #F3F6F7;   /* Ice Gray — alternate sections */
  --wash-2:    #E9EFF1;   /* Mist Gray — light panels */
  --line:      #D6DEE2;   /* Soft Border */
  --line-soft: #EEF3F5;   /* Light Border / dividers */
  --nav-bg:    rgba(251,251,249,.92);

  /* --- Status --- */
  --pos:       #2E7D4F;   /* positive / under-average */
  --neg:       #B03A3A;   /* negative / over-average */
}

/* ---- Dark theme (explicit toggle) ---- */
:root[data-theme="dark"] {
  --heading:   #F6F7F8;
  --white:     #14181C;
  --paper:     #1E242A;
  --ink:       #DCE2E6;
  --muted:     #AAB4BC;
  --muted-lt:  #7F8992;
  --wash:      #171D22;
  --wash-2:    #20282F;
  --line:      #2F3942;
  --line-soft: #283038;
  --nav-bg:    rgba(20,24,28,.88);
  --blue:      #6FBEC0;   /* teal brightened for links/buttons on dark */
  --gold-ink:  #E3BF58;   /* gold as text goes bright in dark */
  --pos:       #57B06E;
  --neg:       #E07A7A;
}

/* ---- Dark theme (follow the OS when no explicit toggle is set) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --heading:   #F6F7F8;
    --white:     #14181C;
    --paper:     #1E242A;
    --ink:       #DCE2E6;
    --muted:     #AAB4BC;
    --muted-lt:  #7F8992;
    --wash:      #171D22;
    --wash-2:    #20282F;
    --line:      #2F3942;
    --line-soft: #283038;
    --nav-bg:    rgba(20,24,28,.88);
    --blue:      #6FBEC0;
    --gold-ink:  #E3BF58;
    --pos:       #57B06E;
    --neg:       #E07A7A;
  }
}