/* ============================================================
   tokens-v2.css - Glass theme token layer (v2)
   Governs ALL colors, radii, shadows, and type tokens for the
   glass theme. Page content never hardcodes values; it uses
   the tokens below.

   Palette: white page, glass surfaces, ink-slate accent.
   RULE: accent family is ink-slate. No green anywhere.
   Dark variant uses deep navy page, brightened ice accent.
   ============================================================ */
:root {
    /* page */
    --page-bg: #F7F5F2;
    --ink-1: #16203A;
    --ink-2: #4A5A7C;
    --ink-3: #59677F;
    /* accent: ink slate */
    --accent: #33415C;
    --accent-hover: #22304A;
    --accent-wash: #EDF0F4;
    --accent-line: #D3DAE3;
    /* surfaces (glass) */
    --glass-fill: rgba(251,251,248,0.94);
    --glass-fill-strong: rgba(251,251,248,0.98);
    --glass-border: #D3DAE3;
    --shadow-glass: 0 1px 2px rgba(22,32,58,0.04);
    --shadow-glass-hover: 0 3px 8px rgba(22,32,58,0.08);
    /* semantic */
    --color-success: #33415C;
    --color-warning: #B06A18;
    --color-danger: #A93A3A;
    /* callout washes */
    --note-wash: var(--accent-wash);
    --warn-wash: #F7EFE4;
    --danger-wash: #F8EAEA;
    /* chart palette (5 shades, ink family) */
    --chart-1: var(--accent);
    --chart-2: #5C7090;
    --chart-3: #8F9EB4;
    --chart-4: #B4C0CE;
    --chart-5: #D5DCE4;
    /* code */
    --code-bg: rgba(22,32,58,0.05);
    --code-border: var(--accent-line);
    /* radii */
    --radius-xl: 8px;
    --radius-lg: 6px;
    --radius-md: 4px;
    --radius-xs: 2px;
    --radius-pill: 999px;
    /* type */
    --font-serif: "Newsreader", Georgia, serif;
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    /* motion */
    --motion-fast: 0.18s ease;
    --motion-med: 0.3s ease;

    /* Compatibility aliases. Existing shared components still use the original
       semantic names, but their values now resolve from this canonical layer. */
    --color-bg: var(--page-bg);
    --color-surface: var(--glass-fill-strong);
    --color-surface-raised: var(--glass-fill-strong);
    --color-surface-tint: var(--accent-wash);
    --color-border: var(--accent-line);
    --color-border-strong: var(--accent-line);
    --color-text-primary: var(--ink-1);
    --color-text-secondary: var(--ink-2);
    --color-text-tertiary: var(--ink-3);
    --color-accent: var(--accent);
    --color-accent-hover: var(--accent-hover);
    --color-accent-wash: var(--accent-wash);
    --color-accent-line: var(--accent-line);
    --color-on-accent: #FFFFFF;
    --color-code-bg: var(--code-bg);
    --radius-sm: var(--radius-xs);
    --radius-base: var(--radius-xs);
    --border: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);
    --border-accent: 2px solid var(--color-accent);
    --shadow-raised: var(--shadow-glass);
    --shadow-overlay: var(--shadow-glass-hover);
    --transition-interactive: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
html[data-theme="dark"] {
    --page-bg: #0A1020;
    --ink-1: #E8EDF5;
    --ink-2: #A9B6CF;
    --ink-3: #7A88A6;
    --accent: #C7D2E4;
    --accent-hover: #E1E7F0;
    --accent-wash: #16213A;
    --accent-line: #26334F;
    --glass-fill: rgba(18,28,50,0.55);
    --glass-fill-strong: rgba(24,36,62,0.80);
    --glass-border: rgba(199,210,228,0.16);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.32);
    --shadow-glass-hover: 0 14px 44px rgba(0,0,0,0.55);
    --color-success: #C7D2E4;
    --color-warning: #E0A96E;
    --color-danger: #E08A8A;
    --note-wash: var(--accent-wash);
    --warn-wash: #262015;
    --danger-wash: #261717;
    /* chart palette must be redeclared in dark or legacy tokens.css wins */
    --chart-1: var(--accent);
    --chart-2: #8F9EB4;
    --chart-3: #A9B6CF;
    --chart-4: #C7D2E4;
    --chart-5: #E1E7F0;
    --code-bg: rgba(199,210,228,0.08);
    --code-border: var(--accent-line);
    --color-on-accent: #0A1020;
}