/* =============================================================
   tokens.css — CSS custom properties (design tokens)
   ============================================================= */
:root {
    --bg-main: hsla(230, 15%, 10%, 0.35);
    --bg-pane: hsla(230, 15%, 14%, 0.45);
    --bg-pane-hover: hsla(0, 0%, 100%, 0.08);
    /* slight white highlight */
    --text-primary: hsl(230, 20%, 95%);
    --text-secondary: hsl(230, 15%, 70%);
    --accent: hsl(250, 100%, 75%);
    --accent-glow: hsla(250, 100%, 75%, 0.3);
    /* Glass borders */
    --border: hsla(0, 0%, 100%, 0.12);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    --font-ui: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;
    --transition: 0.25s linear;
}

[data-theme="light"] {
    --bg-main: hsla(0, 0%, 100%, 0.45);
    --bg-pane: hsla(0, 0%, 100%, 0.6);
    --bg-pane-hover: hsla(0, 0%, 100%, 0.85);
    --text-primary: hsl(230, 30%, 12%);
    --text-secondary: hsl(230, 15%, 45%);
    --border: hsla(0, 0%, 0%, 0.1);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --accent: hsl(250, 100%, 60%);
    --accent-glow: hsla(250, 100%, 60%, 0.2);
}