/*
 * SoTDB.gg design tokens. Loaded before base.css on every page.
 *
 * The five brand values (background, surface, text, accent, border and the
 * two fonts) are unchanged; everything else here is DERIVED from them with
 * color-mix(), so dyslexia mode, which overrides the five on <body>, re-derives
 * the whole scale automatically. Pages should use these names instead of
 * hard-coded hex/rgba values.
 */
:root {
    /* --- Brand (do not change) --- */
    --primary-font: 'IM Fell English SC', serif;
    --body-font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --background-color: #1c2e3a;
    --surface-color: #2c3e50;
    --text-color: #d8c9a7;
    --accent-color: #a48a58;
    --border-color: #a48a58;
}

/*
 * Derived tokens are declared on <body> as well as :root on purpose: a custom
 * property is resolved where it is declared, so dyslexia mode (which overrides
 * the brand values on body.dyslexia-mode) only re-derives these if they are
 * declared on body too.
 */
:root, body {
    /* --- Surfaces (deepest to most raised) --- */
    --surface-0: color-mix(in srgb, var(--background-color) 55%, black);       /* header/footer/menus */
    --surface-1: var(--surface-color);                                          /* cards, panels */
    --surface-2: color-mix(in srgb, var(--surface-color) 88%, var(--text-color)); /* raised: tiles, inputs on cards */
    --surface-3: color-mix(in srgb, var(--surface-color) 78%, var(--text-color)); /* hover of raised */
    --surface-inset: color-mix(in srgb, var(--background-color) 85%, black);    /* inputs, wells */
    --overlay: color-mix(in srgb, black 70%, transparent);

    /* --- Text --- */
    --text-strong: var(--text-color);
    --text-muted: color-mix(in srgb, var(--text-color) 72%, transparent);
    --text-faint: color-mix(in srgb, var(--text-color) 50%, transparent);
    --text-on-accent: var(--background-color);

    /* --- Accent --- */
    --accent: var(--accent-color);
    --accent-hover: color-mix(in srgb, var(--accent-color) 82%, var(--text-color));
    --accent-active: color-mix(in srgb, var(--accent-color) 85%, black);
    --accent-soft: color-mix(in srgb, var(--accent-color) 18%, transparent);   /* tinted backgrounds */
    --accent-soft-strong: color-mix(in srgb, var(--accent-color) 30%, transparent);

    /* --- Borders --- */
    --border: var(--border-color);
    --border-soft: color-mix(in srgb, var(--border-color) 35%, transparent);
    --border-faint: color-mix(in srgb, var(--border-color) 18%, transparent);

    /* --- Semantic --- */
    --success: #3e8e41;
    --success-text: #8ee28e;
    --success-soft: color-mix(in srgb, var(--success) 22%, transparent);
    --warning: #c9962b;
    --warning-text: #f0c46b;
    --warning-soft: color-mix(in srgb, var(--warning) 22%, transparent);
    --danger: #c0392b;
    --danger-text: #ff8a80;
    --danger-soft: color-mix(in srgb, var(--danger) 22%, transparent);
    --info: #3498db;
    --info-text: #8ec9f5;
    --info-soft: color-mix(in srgb, var(--info) 22%, transparent);
    --twitch: #9146FF;
    --kofi: #ff5e5b;

    /* --- Type scale --- */
    --fs-xs: 0.78rem;
    --fs-sm: 0.9rem;
    --fs-md: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.4rem;
    --fs-2xl: 1.8rem;
    --fs-3xl: 2.3rem;
    --lh-tight: 1.2;
    --lh-body: 1.55;

    /* --- Spacing --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* --- Shape --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* --- Elevation --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 45%, transparent);

    /* --- Motion --- */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* --- Layout --- */
    --content-max: 1200px;
    --content-narrow: 760px;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; }
}