/* Color themes for the tracker app and the public site (both load this file first).

   Themes: "system" (no data-theme attribute: follows the OS light/dark setting), "light", "dark", "contrast".
   To add a palette:
     1. add a  :root[data-theme="<name>"]{ ... }  block below that sets EVERY token in the light block
        (tests/test_themes.py fails if one is missing),
     2. add ["<name>", "<Label>"] to THEMES in web/theme.js.
   Components only ever use these tokens, never raw colors, so a new block re-skins everything. */

:root{
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* light: the default */
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#F7F9FC; --ink:#0E1A2B; --muted:#5A6678; --line:#DCE2EA;
  --accent:#2346C8; --accent-ink:#FFFFFF; --accent-soft:#E7ECFB; --grid:rgba(35,70,200,.06);
  --buy:#0A7550; --buy-soft:#E2F4EC; --sell:#BC3B26; --sell-soft:#FBE9E5; --warn:#9A6410; --warn-soft:#FBF1DE;
  --shadow:0 1px 2px rgba(14,26,43,.06),0 12px 32px rgba(14,26,43,.10);
  --focus:var(--accent); --focus-width:2px;
  color-scheme:light;
}

/* dark: chosen explicitly, or "system" on a device set to dark */
:root[data-theme="dark"]{
  --bg:#0A101A; --surface:#111927; --surface-2:#0E1521; --ink:#E6EBF2; --muted:#92A0B5; --line:#223045;
  --accent:#7E9CFF; --accent-ink:#0A101A; --accent-soft:#18233F; --grid:rgba(126,156,255,.06);
  --buy:#3DC896; --buy-soft:#10291F; --sell:#F27D66; --sell-soft:#2E1712; --warn:#E6B657; --warn-soft:#2B2210;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
  --focus:var(--accent); --focus-width:2px;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0A101A; --surface:#111927; --surface-2:#0E1521; --ink:#E6EBF2; --muted:#92A0B5; --line:#223045;
    --accent:#7E9CFF; --accent-ink:#0A101A; --accent-soft:#18233F; --grid:rgba(126,156,255,.06);
    --buy:#3DC896; --buy-soft:#10291F; --sell:#F27D66; --sell-soft:#2E1712; --warn:#E6B657; --warn-soft:#2B2210;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);
    --focus:var(--accent); --focus-width:2px;
    color-scheme:dark;
  }
}

/* high contrast: black on white, every text color at 7:1 or better, solid borders, no shadows */
:root[data-theme="contrast"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F0F0F0; --ink:#000000; --muted:#2B2B2B; --line:#000000;
  --accent:#0033B8; --accent-ink:#FFFFFF; --accent-soft:#E0E7FF; --grid:transparent;
  --buy:#00573A; --buy-soft:#DDF2E8; --sell:#9A0E00; --sell-soft:#FDE4DF; --warn:#663D00; --warn-soft:#FFEFCC;
  --shadow:none;
  --focus:#000000; --focus-width:3px;
  color-scheme:light;
}
:root[data-theme="contrast"] a{text-decoration:underline}

/* ---------- theme picker (shared by the app header and the site nav) ---------- */
.theme-pick{position:relative;display:inline-flex}
.theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.theme-btn:hover{background:var(--surface-2)}
.theme-btn svg{width:18px;height:18px}
.theme-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:200px;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;
  background:none;color:var(--ink);font:500 14px var(--f-body);text-align:left;cursor:pointer}
.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--surface-2)}
.theme-menu button svg{width:16px;height:16px;flex:none}
.theme-menu button .tick{margin-left:auto;color:var(--accent);visibility:hidden}
.theme-menu button[aria-checked="true"]{font-weight:600}
.theme-menu button[aria-checked="true"] .tick{visibility:visible}
.theme-menu .hint{display:block;font-size:12px;color:var(--muted);padding:6px 10px 4px}