/* Theme tokens. Switching = two attributes on <html>, set by ThemeProvider —
   no React re-render, no per-component colour code. Adding an accent group is
   one 3-line block below; see src/theme/themes.ts for the picker's list. */

:root {
  --radius: 10px;
  --radius-sm: 7px;
  --rail-w: 84px;
  --col-w: 168px;
  --slider-w: 232px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- font groups -------------------------------------------------------- */
/* The three pairings offered in Themes; the faces themselves are self-hosted
   by styles/fonts.css, and the picker's list lives in theme/themes.ts. */
[data-fonts="studio"] {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-fonts="editorial"] {
  --font: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Fraunces", "Be Vietnam Pro", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-fonts="native"] {
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- base themes --------------------------------------------------------- */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-sunken: #f6f7f9;
  --bg-elev: #ffffff;
  --border: #dcdfe4;
  --border-soft: #eceef1;
  --text: #14181d;
  --text-dim: #5c6773;
  --danger: #c2402f;
  --accent-l: 42%;
  --accent-fg: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-sunken: #0b0b0c;
  --bg-elev: #131315;
  --border: #2a2a2e;
  --border-soft: #1d1d20;
  --text: #f2f3f5;
  --text-dim: #9aa2ad;
  --danger: #ff6b57;
  --accent-l: 60%;
  --accent-fg: #0a0a0a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* --- accent groups ------------------------------------------------------ */
[data-accent="amber"]   { --accent-h: 33;  --accent-s: 92%; }
[data-accent="blue"]    { --accent-h: 214; --accent-s: 88%; }
[data-accent="emerald"] { --accent-h: 158; --accent-s: 68%; }
[data-accent="rose"]    { --accent-h: 343; --accent-s: 82%; }
[data-accent="violet"]  { --accent-h: 265; --accent-s: 78%; }

:root {
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 7%));
  --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);
}

/* --- base elements ------------------------------------------------------ */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); }

.btn {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent-line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); background: var(--bg-sunken); }

.field {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 220px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}