/* ───────── Design tokens & base ─────────
   Colourways (data-variant) mirror each library's docs site:
   citron · cobalt · plum · verdant · ember — light + dark each. */

:root,
[data-theme="light"][data-variant="citron"] {
  --bg:        oklch(0.965 0.018 95);
  --bg-elev:   oklch(0.985 0.012 95);
  --ink:       oklch(0.205 0.022 85);
  --ink-soft:  oklch(0.35  0.025 85);
  --ink-mute:  oklch(0.55  0.018 85);
  --line:      oklch(0.88  0.018 85);
  --line-soft: oklch(0.92  0.015 85);

  --card-dark: oklch(0.235 0.028 85);
  --card-dark-fg: oklch(0.96 0.018 95);
  --card-mid:  oklch(0.62  0.038 80);
  --card-mid-fg: oklch(0.98 0.015 95);
  --card-light: oklch(0.985 0.012 95);

  /* semtest accent — amber (#e8913a) */
  --accent:    oklch(0.72  0.15  58);
  --accent-ink: oklch(0.26 0.06  58);
  --link:      oklch(0.50  0.16  35);

  --code-bg:   oklch(0.205 0.022 85);
  --code-fg:   oklch(0.94  0.015 95);
  --tk-kw:     oklch(0.85  0.20  120);
  --tk-str:    oklch(0.82  0.14  60);
  --tk-num:    oklch(0.78  0.14  40);
  --tk-fn:     oklch(0.90  0.10  90);
  --tk-cm:     oklch(0.60  0.04  85);
  --tk-prop:   oklch(0.80  0.12  175);
  --tk-tag:    oklch(0.82  0.14  20);
}

[data-theme="dark"][data-variant="citron"] {
  --bg:        oklch(0.18  0.022 85);
  --bg-elev:   oklch(0.22  0.024 85);
  --ink:       oklch(0.96  0.018 95);
  --ink-soft:  oklch(0.82  0.022 90);
  --ink-mute:  oklch(0.58  0.022 90);
  --line:      oklch(0.30  0.022 85);
  --line-soft: oklch(0.26  0.022 85);

  --card-dark: oklch(0.985 0.012 95);
  --card-dark-fg: oklch(0.205 0.022 85);
  --card-mid:  oklch(0.42  0.038 80);
  --card-mid-fg: oklch(0.98 0.015 95);
  --card-light: oklch(0.26 0.024 85);

  /* semtest accent — amber */
  --accent:    oklch(0.76  0.15  58);
  --accent-ink: oklch(0.22 0.05  58);
  --link:      oklch(0.78  0.15  60);

  --code-bg:   oklch(0.13  0.018 85);
  --code-fg:   oklch(0.94  0.015 95);
}

[data-theme="light"][data-variant="cobalt"] {
  --bg:        oklch(0.965 0.012 80);
  --bg-elev:   oklch(0.985 0.008 80);
  --ink:       oklch(0.21  0.05  260);
  --ink-soft:  oklch(0.36  0.05  260);
  --ink-mute:  oklch(0.55  0.04  260);
  --line:      oklch(0.88  0.015 260);
  --line-soft: oklch(0.92  0.012 260);

  --card-dark: oklch(0.28  0.10  265);
  --card-dark-fg: oklch(0.96 0.012 95);
  --card-mid:  oklch(0.60  0.07  265);
  --card-mid-fg: oklch(0.98 0.012 95);
  --card-light: oklch(0.985 0.008 80);

  --accent:    oklch(0.72  0.20  35);
  --accent-ink: oklch(0.25 0.06  35);
  --link:      oklch(0.55  0.18  260);

  --code-bg:   oklch(0.21  0.06  260);
  --code-fg:   oklch(0.94  0.012 90);
  --tk-kw:     oklch(0.78  0.20  35);
  --tk-str:    oklch(0.82  0.16  140);
  --tk-num:    oklch(0.78  0.14  70);
  --tk-fn:     oklch(0.85  0.12  240);
  --tk-cm:     oklch(0.55  0.04  260);
  --tk-prop:   oklch(0.80  0.13  200);
  --tk-tag:    oklch(0.80  0.18  20);
}

[data-theme="dark"][data-variant="cobalt"] {
  --bg:        oklch(0.18  0.05  265);
  --bg-elev:   oklch(0.22  0.06  265);
  --ink:       oklch(0.96  0.012 80);
  --ink-soft:  oklch(0.82  0.015 80);
  --ink-mute:  oklch(0.58  0.025 260);
  --line:      oklch(0.31  0.05  265);
  --line-soft: oklch(0.26  0.05  265);

  --card-dark: oklch(0.985 0.008 80);
  --card-dark-fg: oklch(0.21 0.05 260);
  --card-mid:  oklch(0.42  0.08  265);
  --card-mid-fg: oklch(0.98 0.012 80);
  --card-light: oklch(0.27 0.06 265);

  --accent:    oklch(0.76  0.22  35);
  --accent-ink: oklch(0.20 0.05  35);
  --link:      oklch(0.78  0.16  35);

  --code-bg:   oklch(0.13  0.04  265);
  --code-fg:   oklch(0.94  0.012 80);
}

/* ─── Plum: purple ink + lime accent ─── */
[data-theme="light"][data-variant="plum"] {
  --bg:        oklch(0.965 0.014 320);
  --bg-elev:   oklch(0.985 0.010 320);
  --ink:       oklch(0.22  0.07  315);
  --ink-soft:  oklch(0.38  0.06  315);
  --ink-mute:  oklch(0.56  0.05  315);
  --line:      oklch(0.88  0.018 320);
  --line-soft: oklch(0.92  0.014 320);

  --card-dark: oklch(0.28  0.11  315);
  --card-dark-fg: oklch(0.97 0.014 320);
  --card-mid:  oklch(0.60  0.13  330);
  --card-mid-fg: oklch(0.98 0.012 320);
  --card-light: oklch(0.985 0.010 320);

  /* react-collapsible accent — orchid (Amethyst) */
  --accent:    oklch(0.80  0.16  310);
  --accent-ink: oklch(0.27 0.08  310);
  --link:      oklch(0.55  0.20  320);

  --code-bg:   oklch(0.22  0.07  315);
  --code-fg:   oklch(0.94  0.012 320);
  --tk-kw:     oklch(0.86  0.20  115);
  --tk-str:    oklch(0.82  0.16  60);
  --tk-num:    oklch(0.80  0.16  35);
  --tk-fn:     oklch(0.88  0.12  300);
  --tk-cm:     oklch(0.58  0.05  315);
  --tk-prop:   oklch(0.82  0.13  195);
  --tk-tag:    oklch(0.80  0.18  10);
}

[data-theme="dark"][data-variant="plum"] {
  --bg:        oklch(0.17  0.06  315);
  --bg-elev:   oklch(0.21  0.07  315);
  --ink:       oklch(0.96  0.014 320);
  --ink-soft:  oklch(0.82  0.018 320);
  --ink-mute:  oklch(0.58  0.04  315);
  --line:      oklch(0.30  0.06  315);
  --line-soft: oklch(0.25  0.06  315);

  --card-dark: oklch(0.985 0.010 320);
  --card-dark-fg: oklch(0.22 0.07 315);
  --card-mid:  oklch(0.42  0.13  325);
  --card-mid-fg: oklch(0.98 0.012 320);
  --card-light: oklch(0.26 0.07 315);

  /* react-collapsible accent — orchid */
  --accent:    oklch(0.80  0.17  310);
  --accent-ink: oklch(0.22 0.06  310);
  --link:      oklch(0.84  0.16  115);

  --code-bg:   oklch(0.12  0.05  315);
  --code-fg:   oklch(0.94  0.012 320);
}

/* ─── Verdant: deep teal + coral accent ─── */
[data-theme="light"][data-variant="verdant"] {
  --bg:        oklch(0.965 0.014 175);
  --bg-elev:   oklch(0.985 0.010 175);
  --ink:       oklch(0.22  0.05  185);
  --ink-soft:  oklch(0.36  0.05  185);
  --ink-mute:  oklch(0.55  0.04  185);
  --line:      oklch(0.88  0.018 175);
  --line-soft: oklch(0.92  0.014 175);

  --card-dark: oklch(0.28  0.08  190);
  --card-dark-fg: oklch(0.97 0.014 175);
  --card-mid:  oklch(0.58  0.10  175);
  --card-mid-fg: oklch(0.98 0.012 175);
  --card-light: oklch(0.985 0.010 175);

  --accent:    oklch(0.76  0.18  25);
  --accent-ink: oklch(0.22 0.05  25);
  --link:      oklch(0.50  0.13  195);

  --code-bg:   oklch(0.20  0.05  190);
  --code-fg:   oklch(0.94  0.012 175);
  --tk-kw:     oklch(0.80  0.18  25);
  --tk-str:    oklch(0.84  0.16  145);
  --tk-num:    oklch(0.80  0.15  60);
  --tk-fn:     oklch(0.86  0.12  220);
  --tk-cm:     oklch(0.56  0.05  185);
  --tk-prop:   oklch(0.82  0.14  175);
  --tk-tag:    oklch(0.80  0.18  20);
}

[data-theme="dark"][data-variant="verdant"] {
  --bg:        oklch(0.17  0.04  190);
  --bg-elev:   oklch(0.21  0.05  190);
  --ink:       oklch(0.96  0.014 175);
  --ink-soft:  oklch(0.82  0.018 175);
  --ink-mute:  oklch(0.58  0.03  185);
  --line:      oklch(0.30  0.05  190);
  --line-soft: oklch(0.25  0.05  190);

  --card-dark: oklch(0.985 0.010 175);
  --card-dark-fg: oklch(0.22 0.05 185);
  --card-mid:  oklch(0.42  0.09  185);
  --card-mid-fg: oklch(0.98 0.012 175);
  --card-light: oklch(0.26 0.05 190);

  --accent:    oklch(0.78  0.19  25);
  --accent-ink: oklch(0.20 0.05  25);
  --link:      oklch(0.80  0.16  25);

  --code-bg:   oklch(0.12  0.04  190);
  --code-fg:   oklch(0.94  0.012 175);
}

/* ─── Ember: warm amber ink + cool cyan accent ─── */
[data-theme="light"][data-variant="ember"] {
  --bg:        oklch(0.965 0.016 70);
  --bg-elev:   oklch(0.985 0.011 70);
  --ink:       oklch(0.24  0.055 55);
  --ink-soft:  oklch(0.38  0.055 55);
  --ink-mute:  oklch(0.56  0.045 55);
  --line:      oklch(0.88  0.020 62);
  --line-soft: oklch(0.92  0.016 62);

  --card-dark: oklch(0.30  0.085 48);
  --card-dark-fg: oklch(0.97 0.014 70);
  --card-mid:  oklch(0.64  0.135 55);
  --card-mid-fg: oklch(0.99 0.012 70);
  --card-light: oklch(0.985 0.011 70);

  /* windo accent — vivid red */
  --accent:    oklch(0.62  0.23  27);
  --accent-ink: oklch(0.99 0.02  27);
  --link:      oklch(0.55  0.16  50);

  --code-bg:   oklch(0.24  0.055 48);
  --code-fg:   oklch(0.94  0.012 70);
  --tk-kw:     oklch(0.82  0.14  215);
  --tk-str:    oklch(0.84  0.15  140);
  --tk-num:    oklch(0.82  0.15  60);
  --tk-fn:     oklch(0.88  0.13  35);
  --tk-cm:     oklch(0.58  0.05  55);
  --tk-prop:   oklch(0.82  0.13  190);
  --tk-tag:    oklch(0.82  0.16  25);
}

[data-theme="dark"][data-variant="ember"] {
  --bg:        oklch(0.18  0.04  50);
  --bg-elev:   oklch(0.22  0.05  50);
  --ink:       oklch(0.96  0.016 70);
  --ink-soft:  oklch(0.82  0.020 70);
  --ink-mute:  oklch(0.58  0.035 55);
  --line:      oklch(0.31  0.045 50);
  --line-soft: oklch(0.26  0.045 50);

  --card-dark: oklch(0.985 0.011 70);
  --card-dark-fg: oklch(0.24 0.055 50);
  --card-mid:  oklch(0.44  0.12  52);
  --card-mid-fg: oklch(0.99 0.012 70);
  --card-light: oklch(0.26 0.05 50);

  /* windo accent — vivid red */
  --accent:    oklch(0.64  0.23  27);
  --accent-ink: oklch(0.99 0.02  27);
  --link:      oklch(0.82  0.15  215);

  --code-bg:   oklch(0.13  0.035 50);
  --code-fg:   oklch(0.94  0.012 70);
}

/* density */
:root { --density: 1; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--accent); color: var(--accent-ink); }