/* ══════════════════════════════════════════════════════════════════
   SENSARO — SITEWIDE COLOR TOKENS
   ══════════════════════════════════════════════════════════════════
   Single source of truth for color across dashboard.html, user.html,
   and Display_Maps/index.html. Each page keeps its own component CSS
   (buttons, cards, layout) inline — only the color variables live here,
   so there's one place to change the palette instead of three.

   LIGHT MODE IS THE DEFAULT (:root, no attribute needed). Dark mode is
   an explicit opt-in via [data-theme="dark"] on <html>, set by theme.js
   whenever someone picks it in the Account page's Preferences card.

   Include with a plain (non-deferred) <link>, AFTER theme.js and BEFORE
   each page's own <style> block, e.g.:
     <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">   (or "../styles.css" from Display_Maps/)

   NOTE: this file replaces the old styles.css, which was leftover/unused
   CSS from an earlier map iteration (nothing actually linked to it).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── dashboard.html tokens ── */
  --bg:            #f3f7f4;
  --forest-deep:   #ffffff;
  --forest-dark:   #eef3ee;
  --forest-mid:    #e6ede7;
  --card:          #ffffff;
  --pine:          #15803d;
  --pine-dim:      #166534;
  --pine-glow:     rgba(21,128,61,.10);
  --ember:         #ea580c;
  --ember-dark:    #9a3412;
  --danger:        #dc2626;
  --text:          #0f1b12;
  --text-dim:      #3f5a48;
  --text-muted:    #4a6353;   /* was #6b8577 — only 3.7:1, below WCAG AA */
  --border:        rgba(21,128,61,.24);
  --border-glow:   rgba(21,128,61,.32);

  /* ── user.html tokens (--u-* namespace) ── */
  --u-black:        #f3f7f4;
  --u-forest-deep:  #ffffff;
  --u-forest-dark:  #eef3ee;
  --u-forest-mid:   #e6ede7;
  --u-card:         #ffffff;
  --u-border:       rgba(21,128,61,.16);
  --u-border-glow:  rgba(21,128,61,.32);
  --u-pine:         #15803d;
  --u-pine-dim:     #166534;
  --u-pine-muted:   #16a34a;
  --u-warning:      #d97706;
  --u-danger:       #dc2626;
  --u-ember:        #ea580c;
  --u-ember-dark:   #9a3412;
  --u-text:         #0f1b12;
  --u-text-dim:     #3f5a48;
  --u-text-muted:   #4a6353;

  /* ── Display_Maps/index.html tokens ── */
  --bg-deep:    #f3f7f4;
  --bg-panel:   #ffffff;
  --bg-raised:  #eef3ee;
  --accent:     #15803d;
  --accent-dim: #166534;
  --muted:      #3f5a48;
  --text-faint: #6b8577;
  --bg-hover:   #e2ece3;
  --panel-glass: rgba(255,255,255,.94);

  /* ── Fixed top-bar orange — same in both themes, on purpose ──
     Intentionally NOT redefined in the html[data-theme="dark"] block
     below. Any variable declared only here (not overridden there)
     automatically stays constant across both themes — that's the
     mechanism, so don't "complete" this by adding a dark-mode entry. */
  --topbar-orange: #c2410c;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — explicit opt-in, exact values from the original GUI.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* ── dashboard.html tokens ── */
  --bg:            #060e08;
  --forest-deep:   #080f0a;
  --forest-dark:   #0c1a11;
  --forest-mid:    #0f2016;
  --card:          #111c14;
  --pine:          #22c55e;
  --pine-dim:      #16a34a;
  --pine-glow:     rgba(34,197,94,.12);
  --ember:         #fb923c;
  --ember-dark:    #c2410c;
  --danger:        #ef4444;
  --text:          #e9f4ee;
  --text-dim:      #9db8a4;
  --text-muted:    #7d9a86;   /* was #567060 — only 3.6:1, below WCAG AA */
  --border:        rgba(34,197,94,.2);
  --border-glow:   rgba(34,197,94,.28);

  /* ── user.html tokens (--u-* namespace) ── */
  --u-black:        #060e08;
  --u-forest-deep:  #080f0a;
  --u-forest-dark:  #0c1a11;
  --u-forest-mid:   #0f2016;
  --u-card:         #111c14;
  --u-border:       rgba(34,197,94,.12);
  --u-border-glow:  rgba(34,197,94,.28);
  --u-pine:         #22c55e;
  --u-pine-dim:     #16a34a;
  --u-pine-muted:   #4ade80;
  --u-warning:      #f59e0b;
  --u-danger:       #ef4444;
  --u-ember:        #fb923c;
  --u-ember-dark:   #c2410c;
  --u-text:         #e9f4ee;
  --u-text-dim:     #9db8a4;
  --u-text-muted:   #7d9a86;

  /* ── Display_Maps/index.html tokens ── */
  --bg-deep:    #060e08;
  --bg-panel:   #0c1a11;
  --bg-raised:  #111c14;
  --accent:     #22c55e;
  --accent-dim: #16a34a;
  --muted:      #9db8a4;
  --text-faint: #567060;
  --bg-hover:   #16261b;
  --panel-glass: rgba(10,22,14,.94);
}
