/* Selldial tokens. Dark only: plum surfaces, pink action, violet second voice. Source of truth for DESIGN.md.
 * Every colour and font in the console references these by name.
 */
:root {
  /* Three plum tiers, about 5 lightness points apart: page, panel, raised */
  --color-bg:          oklch(16.5% 0.052 320);
  --color-surface:     oklch(21.5% 0.057 320);
  --color-raised:      oklch(27% 0.067 322);
  --color-rule:        oklch(35% 0.075 335);
  --color-edge:        oklch(66% 0.24 350 / 0.28);
  --color-ink:         oklch(97% 0.01 320);
  --color-ink-2:       oklch(91% 0.015 320);
  --color-muted:       oklch(79% 0.035 320);

  /* Magenta is the lead colour: fills and markers, plus a lighter step for text */
  --color-accent:      oklch(66% 0.24 350);
  --color-accent-text: oklch(80% 0.16 350);
  --color-accent-ink:  oklch(15% 0.02 320);
  --color-accent-wash: oklch(31% 0.11 350);

  /* Violet is the supporting voice: links, avatar rings, timeline, switches */
  --color-violet:      oklch(76% 0.14 295);
  --color-violet-fill: oklch(54% 0.17 295);
  --color-violet-wash: oklch(30% 0.08 295);

  /* State colours: always with an icon and a label. They win over magenta. */
  --color-save:        oklch(80% 0.14 155);
  --color-guard:       oklch(86% 0.12 90);
  --color-block:       oklch(74% 0.17 25);

  /* Page background: flat in dark. Light keeps its soft glow (see the light block). */
  --page-bg: var(--color-bg);

  --color-scrim:       oklch(7% 0.03 320 / 0.65);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.5rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  --radius-control: 8px;
  --radius-card:    12px;
  --radius-pill:    999px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   160ms;
  --dur-med:     280ms;

  color-scheme: dark;
}

/* Light theme: opt-in with <html data-theme="light"> (set from Settings, saved in localStorage). Dark stays the default.
 * Same hues and roles as the dark set. Tiers: page, panel (lightest), raised (a step darker for inputs, chips, hover).
 */
:root[data-theme="light"] {
  --color-bg:          oklch(95.5% 0.014 330);
  --color-surface:     oklch(99% 0.006 330);
  --color-raised:      oklch(93% 0.02 330);
  --color-rule:        oklch(84% 0.03 335);
  --color-edge:        oklch(58% 0.24 350 / 0.28);
  --color-ink:         oklch(21% 0.04 320);
  --color-ink-2:       oklch(30% 0.035 320);
  --color-muted:       oklch(44% 0.035 320);

  --color-accent:      oklch(58% 0.24 350);
  --color-accent-text: oklch(47% 0.21 350);
  --color-accent-ink:  oklch(99% 0.006 330);
  --color-accent-wash: oklch(91.5% 0.055 350);

  --color-violet:      oklch(46% 0.17 295);
  --color-violet-fill: oklch(52% 0.17 295);
  --color-violet-wash: oklch(92% 0.045 295);

  --color-save:        oklch(42% 0.13 155);
  --color-guard:       oklch(46% 0.11 75);
  --color-block:       oklch(50% 0.19 25);

  --color-scrim:       oklch(25% 0.04 320 / 0.4);

  --page-bg:
    radial-gradient(ellipse 55% 42% at 14% -4%, oklch(82% 0.1 350 / 0.5), transparent 70%),
    radial-gradient(ellipse 45% 38% at 34% 0%, oklch(84% 0.08 295 / 0.4), transparent 72%),
    radial-gradient(ellipse 50% 40% at 100% 100%, oklch(86% 0.07 295 / 0.35), transparent 70%),
    var(--color-bg);

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; }
html { accent-color: var(--color-accent); scrollbar-color: var(--color-rule) transparent; }
body {
  background: var(--page-bg);
  background-attachment: fixed; /* applies to every layer, so sticky bars can match the page exactly */
  color: var(--color-ink-2);
  font: 400 var(--text-sm)/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
::selection { background: var(--color-accent-wash); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.num, table { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.icon { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }