/* ZenHID design tokens. Everything visual routes through here. */

/* the fix for every overlay that uses the hidden attribute */
[hidden] { display: none !important; }

:root {
  /* neutral ramp — overridden per theme */
  --bg:#0b0e11; --bg-1:#12161b; --bg-2:#171d24; --bg-3:#1d242d;
  --line:#222a34; --line-2:#2c3641;
  --fg:#e6edf3; --fg-dim:#8695a4; --fg-mute:#5b6875;
  --ok:#2ecc71; --warn:#ffb020; --err:#ff4757;

  /* accent — set by [data-accent] */
  --accent-h:191; --accent-s:100%; --accent-l:50%;

  --accent:       hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 12%));
  --accent-soft:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.14);
  --accent-line:  hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.45);
  --accent-ink:   hsl(var(--accent-h) var(--accent-s) var(--accent-l));

  /* density & typography */
  --row:28px; --pad:11px; --gap:8px;
  --fs-ui:14px; --fs-mono:13px;

  --r:6px; --r-lg:10px; --dur:160ms;

  --font-ui:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* drawer */
  --drawer-w: 380px;
  --shadow-lg: 0 24px 70px rgba(0,0,0,.55);
}

/* ---------- themes ---------- */
[data-theme="terminal"] {
  --bg:#000; --bg-1:#070a07; --bg-2:#0b0f0b; --bg-3:#101610;
  --line:#1a241a; --line-2:#243024;
  --fg:#c8ffc8; --fg-dim:#5f9a5f; --fg-mute:#3d663d;
}
[data-theme="oled"] {
  --bg:#000; --bg-1:#050506; --bg-2:#0a0a0c; --bg-3:#101013;
  --line:#17171a; --line-2:#212127;
  --fg:#f2f2f4; --fg-dim:#7c7c86; --fg-mute:#4a4a53;
}
[data-theme="a24"] {
  --bg:#e9e5dd; --bg-1:#f3f0ea; --bg-2:#e2ddd3; --bg-3:#d8d2c6;
  --line:#c9c2b5; --line-2:#b8b0a1;
  --fg:#161513; --fg-dim:#6f685d; --fg-mute:#948c7f;
  --accent-ink:hsl(var(--accent-h) 68% 38%);
}
[data-theme="contrast"] {
  --bg:#000; --bg-1:#000; --bg-2:#0a0a0a; --bg-3:#141414;
  --line:#3a3a3a; --line-2:#5a5a5a;
  --fg:#fff; --fg-dim:#c0c0c0; --fg-mute:#909090;
  --accent-l:62%;
}

/* ---------- accents (12) ---------- */
[data-accent="cyan"]   { --accent-h:191; --accent-s:100%; --accent-l:50%; }
[data-accent="pink"]   { --accent-h:330; --accent-s:100%; --accent-l:62%; }
[data-accent="razer"]  { --accent-h:84;  --accent-s:100%; --accent-l:54%; }
[data-accent="sith"]   { --accent-h:0;   --accent-s:100%; --accent-l:56%; }
[data-accent="amber"]  { --accent-h:38;  --accent-s:100%; --accent-l:55%; }
[data-accent="lime"]   { --accent-h:150; --accent-s:100%; --accent-l:48%; }
[data-accent="violet"] { --accent-h:270; --accent-s:95%;  --accent-l:66%; }
[data-accent="blue"]   { --accent-h:215; --accent-s:100%; --accent-l:60%; }
[data-accent="orange"] { --accent-h:22;  --accent-s:100%; --accent-l:55%; }
[data-accent="mint"]   { --accent-h:165; --accent-s:85%;  --accent-l:52%; }
[data-accent="gold"]   { --accent-h:48;  --accent-s:95%;  --accent-l:56%; }
[data-accent="ice"]    { --accent-h:200; --accent-s:90%;  --accent-l:72%; }

/* ---------- fonts ---------- */
[data-font="jetbrains"] { --font-mono:'JetBrains Mono',ui-monospace,monospace; }
[data-font="fira"]      { --font-mono:'Fira Code',ui-monospace,monospace; }
[data-font="plex"]      { --font-mono:'IBM Plex Mono',ui-monospace,monospace; }
[data-font="geist"]     { --font-mono:'Geist Mono',ui-monospace,monospace; }

/* ---------- density ---------- */
[data-density="compact"] { --row:21px; --pad:7px; --gap:5px; --fs-ui:13px; --fs-mono:12px; }
[data-density="comfy"]   { --row:31px; --pad:14px; --gap:11px; --fs-ui:14px; --fs-mono:13.5px; }

/* ---------- motion ---------- */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  transition:none !important; animation:none !important;
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}