/* Recompensated design tokens — single source of truth for palette.
 * Loaded before custom.css so variables resolve everywhere.
 * Dark mode is the default (:root). Light is opt-in via [data-theme="light"].
 */

:root, [data-theme="dark"] {
    /* Surfaces */
    --bg-base:          #0b1018;
    --bg-main:          #0b1018;
    --bg-card:          rgba(22, 29, 44, 0.95);
    --bg-card-end:      rgba(14, 20, 32, 0.98);
    --bg-surface:       rgba(255, 255, 255, 0.03);
    --bg-surface-hover: rgba(255, 255, 255, 0.05);

    /* Borders */
    --border-subtle:    rgba(96, 114, 146, 0.18);
    --border-medium:    rgba(110, 126, 156, 0.14);
    --border-strong:    rgba(148, 163, 207, 0.28);

    /* Text */
    --text-primary:     #f6f8ff;
    --text-body:        #d8def0;
    --text-muted:       #95a1bc;
    --text-faint:       #7f8da8;

    /* Primary accent — emerald in dark (brand identity) */
    --accent:           #34f0b5;
    --accent-hover:     #10d99a;
    --accent-strong:    #34f0b5;
    --accent-dim:       rgba(52, 240, 181, 0.12);
    --accent-border:    rgba(52, 240, 181, 0.22);
    --glow-accent:      rgba(52, 240, 181, 0.18);

    /* Money accent — same emerald in dark so money == accent */
    --money:            #34f0b5;
    --money-strong:     #10d99a;
    --money-dim:        rgba(52, 240, 181, 0.12);
    --money-border:     rgba(52, 240, 181, 0.28);

    /* Semantic */
    --danger:           #ef4444;
    --danger-dim:       rgba(239, 68, 68, 0.12);
    --warning:          #f59e0b;
    --warning-dim:      rgba(245, 158, 11, 0.12);
    --info:             #38bdf8;

    /* Elevation */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25),
                   0 2px 4px rgba(0, 0, 0, 0.18);
    --shadow-md:   0 1px 2px rgba(0, 0, 0, 0.25),
                   0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg:   0 2px 4px rgba(0, 0, 0, 0.30),
                   0 12px 28px rgba(0, 0, 0, 0.35);
    --shadow-hero: 0 1px 2px rgba(0, 0, 0, 0.25),
                   0 6px 16px rgba(52, 240, 181, 0.10),
                   0 16px 36px rgba(0, 0, 0, 0.30);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(52, 240, 181, 0.35);

    /* Legacy-kept compatibility tokens (referenced by current custom.css) */
    --shadow-color: rgba(4, 10, 20, 0.28);
    --header-bg:    rgba(31, 41, 55, 1);
    --ticker-bg:    #1e293b;
    --input-bg:     rgba(31, 41, 55, 1);
    --footer-bg:    linear-gradient(180deg, rgba(13, 18, 28, 0.98), rgba(8, 12, 20, 1));
    --dropdown-bg:  linear-gradient(180deg, rgba(23, 31, 47, 0.98), rgba(13, 18, 30, 0.99));
}

[data-theme="light"] {
    /* Surfaces — Stripe Dashboard language */
    --bg-base:          #f6f9fc;
    --bg-main:          #f6f9fc;
    --bg-card:          #ffffff;
    --bg-card-end:      #fbfcfe;
    --bg-surface:       rgba(15, 34, 80, 0.04);
    --bg-surface-hover: rgba(15, 34, 80, 0.07);

    /* Borders */
    --border-subtle:    #e3e8ee;
    --border-medium:    #d6dce5;
    --border-strong:    #b8c1cf;

    /* Text — deep navy, not pure black */
    --text-primary:     #0a2540;
    --text-body:        #1f3a5f;
    --text-muted:       #4b5875;
    --text-faint:       #697386;

    /* Primary accent — indigo (UI / interactive) */
    --accent:           #4f46e5;
    --accent-hover:     #4338ca;
    --accent-strong:    #635bff;
    --accent-dim:       rgba(79, 70, 229, 0.08);
    --accent-border:    rgba(79, 70, 229, 0.22);
    --glow-accent:      rgba(79, 70, 229, 0.18);

    /* Money accent — emerald (balances, progress, earnings) */
    --money:            #059669;
    --money-strong:     #047857;
    --money-dim:        rgba(5, 150, 105, 0.10);
    --money-border:     rgba(5, 150, 105, 0.28);

    /* Semantic */
    --danger:           #dc2626;
    --danger-dim:       rgba(220, 38, 38, 0.10);
    --warning:          #d97706;
    --warning-dim:      rgba(217, 119, 6, 0.10);
    --info:             #0284c7;

    /* Elevation — the Stripe signature */
    --shadow-xs:   0 1px 2px rgba(15, 34, 80, 0.06);
    --shadow-sm:   0 1px 2px rgba(15, 34, 80, 0.06),
                   0 2px 4px rgba(15, 34, 80, 0.04);
    --shadow-md:   0 1px 2px rgba(15, 34, 80, 0.06),
                   0 4px 12px rgba(15, 34, 80, 0.08);
    --shadow-lg:   0 2px 4px rgba(15, 34, 80, 0.08),
                   0 12px 28px rgba(15, 34, 80, 0.10);
    --shadow-hero: 0 1px 2px rgba(15, 34, 80, 0.05),
                   0 6px 16px rgba(79, 70, 229, 0.10),
                   0 16px 36px rgba(15, 34, 80, 0.08);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);

    /* Legacy-kept compatibility tokens */
    --shadow-color: rgba(15, 34, 80, 0.08);
    --header-bg:    #ffffff;
    --ticker-bg:    #1e293b;   /* intentionally dark in both themes */
    --input-bg:     #ffffff;
    --footer-bg:    linear-gradient(180deg, #ffffff, #f6f9fc);
    --dropdown-bg:  #ffffff;
}