/* WattSpot design tokens — shared by index, admin, and privacy.
   Primitives name the palette; semantic tokens name the role. Surfaces, text,
   and lines are themed (light defaults here, dark override at the bottom);
   brand accents (amber / blue / score) hold across both themes. */
:root {
  /* --- Brand primitives (theme-independent) --- */
  --navy: #14213d;
  --amber: #fca311;
  --amber-bright: #ffb733;   /* amber, hover */
  --blue: #2f6fd0;
  --blue-dark: #2b6bcc;      /* blue, hover */

  /* Climb-fit score scale — mirrors scoreColor() in app.js for the map */
  --score-good: #0a9648;     /* green — great fit  */
  --score-ok:   #fca311;     /* amber — decent     */
  --score-poor: #c1121f;     /* red — a stretch    */

  /* Semantic action roles */
  --action: var(--amber);            /* primary action + "Find in ride" */
  --action-hover: var(--amber-bright);
  --action-alt: var(--blue);         /* "Top spots near me"             */
  --action-alt-hover: var(--blue-dark);
  --on-action: var(--navy);          /* text on --action                */

  /* --- Themed surfaces / text / lines (light) --- */
  --bg: #ffffff;              /* page canvas            */
  --surface: #ffffff;         /* cards, panels          */
  --surface-sunken: #f6f7f9;  /* subtle fills (stats)   */
  --surface-input: #ffffff;   /* form fields on cards   */
  --text: #222222;            /* primary body text      */
  --text-strong: var(--navy); /* headings / emphasis    */
  --muted: #696969;           /* secondary text (AA)    */
  --ink: var(--text);         /* alias: primary text    */
  --line: #e3e6ec;            /* hairlines / separators */
  --border-input: #cccccc;    /* form field borders     */
  --row-hover: #f6f8fb;       /* list row hover         */
  --row-active: #fff5e6;      /* selected row (amber)   */
  --overlay-scrim: rgba(20, 33, 61, .55);
  --success: #1a7f37;         /* admin status "yes"     */
  --link: #1b64d8;            /* in-copy text links     */

  /* --- App header bar (themed: light here, dark override below) --- */
  --header-bg: #f3f6fb;          /* the top toolbar surface        */
  --header-fg: #2b3242;          /* control labels + button text   */
  --header-fg-dim: #586377;      /* tagline + signed-in name       */
  --header-line: #dde3ec;        /* borders + group dividers       */
  --header-input-bg: #ffffff;    /* header form fields             */
  --header-input-border: #c9d1de;
}

/* Dark theme — surfaces get explicit elevation, text lightens, accents hold;
   the header bar tracks the theme too (dark values below). Applied when the OS
   prefers dark (unless the user forced light via the toggle) OR when the user
   explicitly chose dark. The two blocks below carry the SAME values — keep them
   in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10141c;
    --surface: #1b2230;
    --surface-sunken: #222c3d;
    --surface-input: #222c3d;
    --text: #e6ebf2;
    --text-strong: #f4f7fc;
    --muted: #9aa6b8;
    --line: #2c3648;
    --border-input: #3a4a68;
    --row-hover: #232c3d;
    --row-active: #33291a;
    --overlay-scrim: rgba(4, 8, 16, .66);
    --success: #2ea043;
    --link: #6ea8ff;
    --header-bg: #151c28;
    --header-fg: #dfe6f0;
    --header-fg-dim: #93a0b4;
    --header-line: #2a3446;
    --header-input-bg: #212b3b;
    --header-input-border: #3a4a68;
  }
}
:root[data-theme="dark"] {
  --bg: #10141c;
  --surface: #1b2230;
  --surface-sunken: #222c3d;
  --surface-input: #222c3d;
  --text: #e6ebf2;
  --text-strong: #f4f7fc;
  --muted: #9aa6b8;
  --line: #2c3648;
  --border-input: #3a4a68;
  --row-hover: #232c3d;
  --row-active: #33291a;
  --overlay-scrim: rgba(4, 8, 16, .66);
  --success: #2ea043;
  --link: #6ea8ff;
  --header-bg: #151c28;
  --header-fg: #dfe6f0;
  --header-fg-dim: #93a0b4;
  --header-line: #2a3446;
  --header-input-bg: #212b3b;
  --header-input-border: #3a4a68;
}