:root {
    --color-accent: #5A6B7C;
    --color-accent-hover: #6E8092;
    --color-accent-dim: rgba(90, 107, 124, 0.08);
    --color-accent-soft: rgba(90, 107, 124, 0.14);
    --accent-rgb: 90, 107, 124;
    --pop-rgb: 90, 107, 124;
    --success-rgb: 90, 107, 124;
    --danger-rgb: 90, 107, 124;

    --color-success: #5A6B7C;
    --color-success-bg: rgba(90, 107, 124, 0.10);
    --color-warn: #8A8170;
    --color-warn-bg: rgba(138, 129, 112, 0.10);
    --color-danger: #8A6B6B;
    --color-danger-bg: rgba(138, 107, 107, 0.10);
    --color-info: #5A6B7C;
    --color-info-bg: rgba(90, 107, 124, 0.10);
    --warn: var(--color-warn);
    --info: var(--color-info);

    --color-bg: #080c14;
    --color-bg-tint-1: rgba(90, 107, 124, 0.12);
    --color-bg-tint-2: rgba(90, 107, 124, 0.10);
    --color-surface: rgba(255, 255, 255, 0.055);
    --color-surface-hover: rgba(255, 255, 255, 0.1);
    --color-card: rgba(32, 42, 64, 0.78);
    --color-card-solid: rgba(28, 36, 56, 0.98);
    --color-surface-1: #1a1d24;
    --color-surface-2: #0f1115;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-text-1: #f5f9ff;
    --color-text-2: #a8b3c8;
    --color-text-3: #7a849a;
    --color-on-accent: #ffffff;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 44px;
    --space-8: 56px;
    --space-9: 72px;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 3px rgba(15, 20, 35, 0.08);
    --shadow-sm: 0 4px 14px rgba(15, 20, 35, 0.10), 0 1px 3px rgba(15, 20, 35, 0.05);
    --shadow-md: 0 12px 32px rgba(15, 20, 35, 0.14), 0 2px 8px rgba(15, 20, 35, 0.06);
    --shadow-lg: 0 24px 60px rgba(15, 20, 35, 0.20), 0 4px 16px rgba(15, 20, 35, 0.08);

    --font-size-xxs: 0.625rem;
    --font-size-xs:  0.72rem;
    --font-size-sm:  0.82rem;
    --font-size-md:  0.92rem;
    --font-size-lg:  1.05rem;
    --font-size-xl:  1.25rem;
    --font-size-2xl: 1.6rem;
    --font-size-3xl: 2.1rem;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;

    --line-height-tight: 1.15;
    --line-height-snug:  1.35;
    --line-height-normal:1.55;
    --line-height-relaxed:1.7;

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.06em;

    --motion-fast: 120ms ease;
    --motion-base: 180ms ease;
    --motion-slow: 280ms cubic-bezier(0.22, 1, 0.36, 1);

    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --accent-dim: var(--color-accent-dim);
    --accent-light: var(--color-accent-dim);
    --green: var(--color-success);
    --amber: var(--color-warn);
    --red: var(--color-danger);
    --blue: var(--color-info);
    --text-1: var(--color-text-1);
    --text-2: var(--color-text-2);
    --text-3: var(--color-text-3);
    --surface: var(--color-surface);
    --surface-hover: var(--color-surface-hover);
    --surface-1: var(--color-surface-1);
    --surface-2: var(--color-surface-2);
    --card: var(--color-card);
    --card-solid: var(--color-card-solid);
    --border: var(--color-border);
    --border-md: var(--color-border-strong);

    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-5);
    --space-xl: var(--space-7);

    --r-sm: var(--radius-sm);
    --r-md: var(--radius-md);
    --r-lg: var(--radius-lg);
    --r-xl: var(--radius-xl);
    --r: var(--radius-lg);
    --r-full: 50%;
    --r-p: 18px;

    --sh-sm: var(--shadow-sm);
    --sh-md: var(--shadow-md);

    --text-xs: 0.68rem;
    --text-sm: 0.78rem;
    --text-md: 0.88rem;
    --text-lg: 1.1rem;
    --text-xl: 1.45rem;
    --text-2xl: 1.85rem;

    --transition: var(--motion-base);
    --color-on-dark: #fff;
    --color-on-gold: #000;
    --color-gold: #ffd700;
    --color-coin: #ffd700;
    --color-medal-gold: #FFD700;
    --color-medal-silver: #C0C0C0;
    --color-medal-bronze: #CD7F32;
    --color-streak: #ff922b;
    --color-danger-text: var(--color-danger);
    --color-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
    --color-bg: #fafbff;
    --color-bg-tint-1: rgba(90, 107, 124, 0.10);
    --color-bg-tint-2: rgba(90, 107, 124, 0.10);
    --color-surface: rgba(15, 23, 42, 0.05);
    --color-surface-hover: rgba(15, 23, 42, 0.09);
    --color-card: #ffffff;
    --color-card-solid: #ffffff;
    --color-surface-1: #ffffff;
    --color-surface-2: #f3f5fa;
    --color-border: rgba(15, 23, 42, 0.1);
    --color-border-strong: rgba(15, 23, 42, 0.18);

    --color-text-1: #0f172a;
    --color-text-2: #475569;
    --color-text-3: #5B6678;

    --color-accent: #5A6B7C;
    --color-accent-hover: #6E8092;
    --color-accent-dim: rgba(90, 107, 124, 0.09);
    --color-accent-soft: rgba(90, 107, 124, 0.16);
    --accent-rgb: 90, 107, 124;
    --pop-rgb: 90, 107, 124;
    --success-rgb: 90, 107, 124;
    --danger-rgb: 90, 107, 124;
    --color-success: #5A6B7C;
    --color-success-bg: rgba(90, 107, 124, 0.11);
    --color-warn: #8A8170;
    --color-warn-bg: rgba(138, 129, 112, 0.11);
    --color-danger: #8A6B6B;
    --color-danger-bg: rgba(138, 107, 107, 0.09);
    --color-info: #5A6B7C;
    --color-info-bg: rgba(90, 107, 124, 0.09);

    --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms linear;
        --motion-base: 1ms linear;
        --motion-slow: 1ms linear;
    }
}

@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea {
        font-size: 16px;
    }
}