/* ── Shared design tokens ────────────────────────
   Single source of truth for colors, grain, and
   scrollbar theming.  Imported by every page before
   its own stylesheet.
   ──────────────────────────────────────────────── */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Suppress transitions during theme switch to prevent color flashes */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* Light theme (default) */
:root {
    --color-bg: #faf8f5;
    --color-bg-hover: #ebe8e2;
    --color-text: #111111;
    --color-text-secondary: #666;
    --color-text-muted: #727272;
    --color-text-visited: #707070;
    --color-text-body: #111111;
    --color-accent: #2361a1;
    --color-accent-hover: #1a4a7a;
    --color-accent-light: #5a9fd4;
    --color-border: #ddd;
    --color-input-bg: #fff;
    --color-kbd-bg: #f0ede8;
    --color-gold: #c89b5a;
    --color-gold-end: #a07838;
    --color-step-number: rgba(255, 255, 255, 0.75);
    --color-silver: #808080;
    --color-bronze: #b07848;
    --color-focus-ring: rgba(35, 97, 161, 0.1);
    --color-focus-shadow: rgba(35, 97, 161, 0.3);
    --color-hover-overlay: rgba(0, 0, 0, 0.03);
    --color-shadow-subtle: rgba(0, 0, 0, 0.06);
    --color-cover-shadow: rgba(0, 0, 0, 0.3);
    --color-scrollbar-track: rgba(0, 0, 0, 0.1);
    --color-scrollbar-thumb: rgba(200, 155, 90, 0.5);
    --color-scrollbar-thumb-hover: rgba(200, 155, 90, 0.7);
    --color-gradient-start: var(--color-bg-hover);
    --color-active-gradient-start: rgba(200, 155, 90, 0.07);
    --color-active-gradient-end: rgba(200, 155, 90, 0.015);

    --grain-opacity: 0.08;
    --grain-blend: multiply;
    --font-weight-heading: 380;
    --font-weight-body: 390;
}

/* Dark theme */
[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-bg-hover: #2a2a2a;
    --color-text: #e0e0e0;
    --color-text-secondary: #8e8e8e;
    --color-text-muted: #8e8e8e;
    --color-text-visited: #919191;
    --color-text-body: #bfbfbf;
    --color-accent: #5a9fd4;
    --color-accent-hover: #7ab8e8;
    --color-accent-light: #5a9fd4;
    --color-border: #333;
    --color-input-bg: #2a2a2a;
    --color-kbd-bg: #2a2a2a;
    --color-gold: #8a6d3b;
    --color-gold-end: #6b5430;
    --color-step-number: rgba(255, 255, 255, 0.5);
    --color-silver: #8a8a8a;
    --color-bronze: #a06840;
    --color-focus-ring: rgba(90, 159, 212, 0.2);
    --color-focus-shadow: rgba(90, 159, 212, 0.3);
    --color-hover-overlay: rgba(255, 255, 255, 0.03);
    --color-shadow-subtle: rgba(255, 255, 255, 0.06);
    --color-cover-shadow: rgba(0, 0, 0, 0.5);
    --color-scrollbar-track: rgba(255, 255, 255, 0.14);
    --color-scrollbar-thumb: rgba(138, 109, 59, 0.55);
    --color-scrollbar-thumb-hover: rgba(138, 109, 59, 0.75);
    --color-gradient-start: var(--color-bg-hover);
    --color-active-gradient-start: var(--color-bg-hover);
    --color-active-gradient-end: transparent;

    --grain-opacity: 0.03;
    --grain-blend: screen;
    --font-weight-heading: 350;
    --font-weight-body: 400;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1a1a1a;
        --color-bg-hover: #2a2a2a;
        --color-text: #e0e0e0;
        --color-text-secondary: #8e8e8e;
        --color-text-muted: #8e8e8e;
        --color-text-visited: #919191;
        --color-text-body: #bfbfbf;
        --color-accent: #5a9fd4;
        --color-accent-hover: #7ab8e8;
        --color-accent-light: #5a9fd4;
        --color-border: #333;
        --color-input-bg: #2a2a2a;
        --color-kbd-bg: #2a2a2a;
        --color-gold: #8a6d3b;
        --color-gold-end: #6b5430;
        --color-step-number: rgba(255, 255, 255, 0.5);
        --color-silver: #8a8a8a;
        --color-bronze: #a06840;
        --color-focus-ring: rgba(90, 159, 212, 0.2);
        --color-focus-shadow: rgba(90, 159, 212, 0.3);
        --color-hover-overlay: rgba(255, 255, 255, 0.03);
        --color-shadow-subtle: rgba(255, 255, 255, 0.06);
        --color-cover-shadow: rgba(0, 0, 0, 0.5);
        --color-scrollbar-track: rgba(255, 255, 255, 0.14);
        --color-scrollbar-thumb: rgba(138, 109, 59, 0.55);
        --color-scrollbar-thumb-hover: rgba(138, 109, 59, 0.75);
        --color-gradient-start: var(--color-bg-hover);
        --color-active-gradient-start: var(--color-bg-hover);
        --color-active-gradient-end: transparent;
    
        --grain-opacity: 0.03;
        --grain-blend: screen;
        --font-weight-heading: 350;
        --font-weight-body: 400;
    }
}