:root {
    --ink: #17130f;
    --paper: #faf7f3;
    --surface: #ffffff;
    --surface-2: #f1eae1;
    --muted: #7a716a;
    --border: #e8e1d8;

    --orange: #ff6a1a;
    --red: #e11d34;
    --orange-soft: #ffe4d2;
    --success: #16a34a;
    --danger: #dc2626;

    --grad: linear-gradient(135deg, #ff9a2e 0%, #ff5a1e 45%, #e31c3d 100%);
    --grad-soft: linear-gradient(135deg, rgba(255, 154, 46, 0.16), rgba(227, 28, 61, 0.10));

    --shadow-sm: 0 1px 2px rgba(23, 19, 15, 0.06), 0 1px 1px rgba(23, 19, 15, 0.04);
    --shadow-md: 0 8px 24px -8px rgba(23, 19, 15, 0.16), 0 2px 6px rgba(23, 19, 15, 0.06);
    --shadow-lg: 0 24px 48px -16px rgba(23, 19, 15, 0.24), 0 8px 16px -8px rgba(23, 19, 15, 0.10);
    --shadow-glow: 0 16px 40px -12px rgba(255, 74, 33, 0.45);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.16s;
    --dur-base: 0.25s;
    --dur-slow: 0.4s;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* kept for backward compat with any un-migrated markup */
    --bg: var(--paper);
    --bg-elevated: var(--surface);
    --text: var(--ink);
    --text-muted: var(--muted);
    --accent: var(--orange);
    --shadow: var(--shadow-sm);
}

html[data-theme="dark"] {
    --ink: #f5f1ec;
    --paper: #0b0a09;
    --surface: #18140f;
    --surface-2: #211b15;
    --muted: #a79e93;
    --border: #2c2620;

    --orange: #ff8433;
    --red: #ff3b57;
    --orange-soft: #3a2213;

    --grad: linear-gradient(135deg, #ffab4d 0%, #ff6a33 45%, #ff3b57 100%);
    --grad-soft: linear-gradient(135deg, rgba(255, 132, 51, 0.18), rgba(255, 59, 87, 0.12));

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 16px 44px -10px rgba(255, 110, 51, 0.4);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --ink: #f5f1ec;
        --paper: #0b0a09;
        --surface: #18140f;
        --surface-2: #211b15;
        --muted: #a79e93;
        --border: #2c2620;

        --orange: #ff8433;
        --red: #ff3b57;
        --orange-soft: #3a2213;

        --grad: linear-gradient(135deg, #ffab4d 0%, #ff6a33 45%, #ff3b57 100%);
        --grad-soft: linear-gradient(135deg, rgba(255, 132, 51, 0.18), rgba(255, 59, 87, 0.12));

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
        --shadow-glow: 0 16px 44px -10px rgba(255, 110, 51, 0.4);
    }
}