:root {
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s7: 28px;
    --s8: 32px;
    --s10: 40px;
    --s12: 48px;
    --s14: 56px;
    --s16: 64px;
    --s20: 80px;
    --s24: 96px;

    --r1: 4px;
    --r2: 8px;
    --r3: 12px;
    --r4: 16px;
    --r5: 20px;
    --r6: 24px;
    --r-full: 9999px;

    --a-1: #332200;
    --a-2: #664400;
    --a-3: #b37700;
    --a-4: #e69900;
    --a-5: #ffb800;
    --a-6: #ffc733;
    --a-7: #ffd666;
    --a-8: #ffefb3;

    --danger: #ef4444;
    --success: #10b981;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 400ms;

    --font: 'Inter', -apple-system, system-ui, sans-serif;
    --mono: 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
}

/* ── Dark (default until resolved) ── */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --n-0: #000000;
    --n-1: #08090e;
    --n-2: #0f1118;
    --n-3: #161922;
    --n-4: #202431;
    --n-5: #2d3345;
    --n-6: #41485e;
    --n-7: #5c647e;
    --n-8: #7f88a3;
    --n-9: #a4adc7;
    --n-10: #c9d1e5;
    --n-11: #eef1f8;
    --n-12: #ffffff;

    --bg: var(--n-1);
    --bg-card: rgba(22, 25, 34, 0.55);
    --bg-hover: rgba(32, 36, 49, 0.75);
    --bg-input: rgba(8, 9, 14, 0.65);
    --bg-elevated: rgba(22, 25, 34, 0.75);

    --border: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.16);
    --border-focus: var(--a-5);

    --text: var(--n-12);
    --text-2: var(--n-10);
    --text-3: var(--n-9);
    --text-4: var(--n-8);
    --text-accent: var(--a-5);

    --surface-glass: rgba(22, 25, 34, 0.45);
    --nav-bg: rgba(8, 9, 14, 0.75);
    --hero-grad: linear-gradient(145deg, rgba(22, 25, 34, 0.5) 0%, rgba(12, 13, 19, 0.75) 100%);
    --input-bg: rgba(0, 0, 0, 0.35);
    --glow: rgba(255, 184, 0, 0.04);
    --glow-strong: rgba(255, 184, 0, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
}

/* ── Light ── */

[data-theme="light"] {
    color-scheme: light;

    --n-0: #ffffff;
    --n-1: #f5f6fa;
    --n-2: #eef0f5;
    --n-3: #ffffff;
    --n-4: #f0f2f7;
    --n-5: #dfe2ea;
    --n-6: #c4c9d6;
    --n-7: #8b93a8;
    --n-8: #6b7385;
    --n-9: #4a5265;
    --n-10: #333a4d;
    --n-11: #1e2333;
    --n-12: #0f131f;

    --bg: var(--n-1);
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-hover: rgba(240, 242, 247, 0.9);
    --bg-input: rgba(255, 255, 255, 0.8);
    --bg-elevated: rgba(255, 255, 255, 0.85);

    --border: rgba(15, 19, 31, 0.08);
    --border-hover: rgba(15, 19, 31, 0.16);
    --border-focus: #d99500;

    --text: var(--n-12);
    --text-2: var(--n-10);
    --text-3: var(--n-9);
    --text-4: var(--n-8);
    --text-accent: #c98900;

    --surface-glass: rgba(255, 255, 255, 0.6);
    --nav-bg: rgba(255, 255, 255, 0.75);
    --hero-grad: linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 246, 250, 0.85) 100%);
    --input-bg: rgba(255, 255, 255, 0.85);
    --glow: rgba(255, 184, 0, 0.06);
    --glow-strong: rgba(255, 184, 0, 0.15);

    --shadow-sm: 0 2px 8px rgba(15, 19, 31, 0.06);
    --shadow-md: 0 8px 32px rgba(15, 19, 31, 0.08);
    --shadow-lg: 0 24px 64px rgba(15, 19, 31, 0.10);
}