/* SECTION: Design tokens — dark is the default brand experience, light is the override */

:root {
    /* Color — surface */
    --color-bg: #0c0a07;
    --color-bg-elevated: #141109;
    --color-surface: #1c1810;
    --color-surface-hover: #241f15;
    --color-border: #35301F;
    --color-border-strong: #4a4329;

    /* Color — text */
    --color-text: #f3efe2;
    --color-text-muted: #b6ac93;
    --color-text-faint: #7d7460;

    /* Color — brand */
    --color-brand: #fde300;
    --color-brand-strong: #e6cd00;
    --color-brand-ink: #16130b;
    --color-accent: #ff8c32;
    --color-accent-strong: #ff6a1e;

    /* Color — status */
    --color-success: #57b579;
    --color-success-bg: #16261c;
    --color-danger: #f0605e;
    --color-danger-bg: #2b1615;
    --color-warning: #f2b84b;
    --color-warning-bg: #2a2110;
    --color-info: #6db4e0;
    --color-info-bg: #131f28;

    /* Platform accents (used sparingly on badges only) */
    --color-twitch: #a970ff;
    --color-youtube: #ff5252;
    --color-tiktok: #38e6d4;
    --color-discord: #7289da;

    /* Type */
    --font-body: -apple-system, "Segoe UI", "Segoe UI Variable", "Noto Sans", system-ui, sans-serif;
    --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;

    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
    --text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);

    --leading-tight: 1.2;
    --leading-normal: 1.55;

    /* Spacing (4px grid) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Shape — deliberate chamfered-corner signature, used sparingly */
    --notch: 14px;
    --notch-sm: 8px;
    --radius-sm: 4px;
    --radius-md: 6px;

    /* Elevation — flat, tight shadows rather than soft blur */
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.35), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 0 0 1px rgba(253, 227, 0, 0.35), 0 8px 24px -14px rgba(253, 227, 0, 0.45);

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-layers */
    --z-nav: 20;
    --z-overlay: 30;
    --z-toast: 40;

    --container-width: 76rem;
    --border-width: 1px;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-bg: #faf7ee;
        --color-bg-elevated: #ffffff;
        --color-surface: #fffdf8;
        --color-surface-hover: #f5f0e0;
        --color-border: #e3dac0;
        --color-border-strong: #cdc09a;

        --color-text: #1c1810;
        --color-text-muted: #5c5340;
        --color-text-faint: #83795f;

        --color-success-bg: #e6f5ec;
        --color-danger-bg: #fbe9e8;
        --color-warning-bg: #fbf1dc;
        --color-info-bg: #e6f2fa;

        --shadow-sm: 0 1px 0 rgba(28, 24, 16, 0.08);
        --shadow-md: 0 1px 0 rgba(28, 24, 16, 0.08), 0 10px 24px -16px rgba(28, 24, 16, 0.25);
    }
}

:root[data-theme="light"] {
    --color-bg: #faf7ee;
    --color-bg-elevated: #ffffff;
    --color-surface: #fffdf8;
    --color-surface-hover: #f5f0e0;
    --color-border: #e3dac0;
    --color-border-strong: #cdc09a;

    --color-text: #1c1810;
    --color-text-muted: #5c5340;
    --color-text-faint: #83795f;

    --color-success-bg: #e6f5ec;
    --color-danger-bg: #fbe9e8;
    --color-warning-bg: #fbf1dc;
    --color-info-bg: #e6f2fa;

    --shadow-sm: 0 1px 0 rgba(28, 24, 16, 0.08);
    --shadow-md: 0 1px 0 rgba(28, 24, 16, 0.08), 0 10px 24px -16px rgba(28, 24, 16, 0.25);
}