/* ─── Light (default) ─────────────────────────────────────────────────── */

:root {
    --bg-primary:     #f8f6f2;
    --bg-secondary:   #ffffff;
    --bg-tertiary:    #f0ede7;

    --text-primary:   #1f1f1f;
    --text-secondary: #6b6b6b;
    --text-muted:     #9e9992;

    --accent-gold:    #b89b72;
    --accent-dark:    #232323;

    --border-light:   #e5e2dc;
    --border-medium:  #d2cec7;

    --surface-card:   #ffffff;
    --surface-hover:  #f3f0ea;

    --success: #2d6a4f;
    --warning: #d97706;
    --danger:  #b91c1c;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
}

/* ─── Dark (system preference) ────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary:     #1a1917;
        --bg-secondary:   #211f1c;
        --bg-tertiary:    #2a2825;

        --text-primary:   #ede9e3;
        --text-secondary: #a09890;
        --text-muted:     #6e6560;

        --accent-gold:    #c9aa82;
        --accent-dark:    #ede9e3;

        --border-light:   #2e2c29;
        --border-medium:  #3a3835;

        --surface-card:   #221f1c;
        --surface-hover:  #2e2b27;

        --success: #3a8f68;
        --warning: #e08c1a;
        --danger:  #d4342e;

        --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
    }
}

/* ─── Dark (explicit toggle via Alpine.js + localStorage) ─────────────── */

[data-theme="dark"] {
    --bg-primary:     #1a1917;
    --bg-secondary:   #211f1c;
    --bg-tertiary:    #2a2825;

    --text-primary:   #ede9e3;
    --text-secondary: #a09890;
    --text-muted:     #6e6560;

    --accent-gold:    #c9aa82;
    --accent-dark:    #ede9e3;

    --border-light:   #2e2c29;
    --border-medium:  #3a3835;

    --surface-card:   #221f1c;
    --surface-hover:  #2e2b27;

    --success: #3a8f68;
    --warning: #e08c1a;
    --danger:  #d4342e;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.40);
}