/* ============================================================
   Design tokens — the single source of truth for the whole site.
   Theme: "Midnight Bazaar" — deep dark glass, Binance gold accents.
   To rebrand: change the values here only. Nothing else needs edits.
   ============================================================ */
:root {
    /* Brand */
    --color-brand: #f0b90b;          /* Binance yellow — accents only */
    --color-brand-soft: rgba(240, 185, 11, 0.16);
    --color-brand-grad: linear-gradient(90deg, #f0b90b, #ffd83d);

    /* Surfaces (dark glass) */
    --color-bg: #0a0d13;
    --color-surface: #131824;
    --color-surface-muted: #1a2030;
    --color-border: #242c3d;
    --color-border-strong: #303a52;

    /* Text */
    --color-text: #f2f4f8;
    --color-text-muted: #aab2c0;
    --color-text-faint: #8a919e;
    --color-text-inverse: #0b0e14;    /* dark text on gold buttons */

    /* States (tints that read on dark backgrounds) */
    --color-success: #34d399;
    --color-success-bg: rgba(52, 211, 153, 0.14);
    --color-danger: #f87171;
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.14);

    /* Type */
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 21px;
    --font-size-2xl: 25px;
    --font-size-amount: 36px;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* Shape + depth */
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-qr: 0 8px 24px rgba(0, 0, 0, 0.35);

    --max-width-card: 440px;
}

/* ============================================================
   Midnight Bazaar 2.0 — depth + glow tokens (2026-11-01).
   Core surfaces deepen slightly; everything else in the 2.0
   layers is built from these, so a future re-tune stays here.
   ============================================================ */
:root {
    --color-bg: #070a10;
    --color-surface: #12172a;
    --color-surface-muted: #1a2138;
    --color-border: #26304a;
    --color-border-strong: #35425f;

    /* Richer gold: a diagonal melt for buttons, badges, prices. */
    --color-brand-grad-135: linear-gradient(135deg, #ffd83d 0%, #f0b90b 55%, #d99e06 100%);
    --color-gold-line: rgba(240, 185, 11, 0.55);

    /* Depth + glow */
    --shadow-card-soft: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 18px 38px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(240, 185, 11, 0.35), 0 8px 28px rgba(240, 185, 11, 0.12);
    --glow-btn: 0 10px 26px rgba(240, 185, 11, 0.30);
    --glow-btn-hover: 0 14px 32px rgba(240, 185, 11, 0.40);
    --glass-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 42%);

    /* Motion */
    --dur: 0.22s;
    --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* ============================================================
   IVORY LIGHT — theme 3 (2026-11-01, user's explicit choice,
   superseding Midnight Bazaar). Warm ivory surfaces, ink text,
   gold kept for fills and selection; a darker gold carries
   text on light. Redefining the tokens flips the whole site;
   per-file Ivory layers fix the hardcoded dark spots.
   ============================================================ */
:root {
    --color-bg: #f6f2ea;
    --color-surface: #ffffff;
    --color-surface-muted: #efe9dc;
    --color-border: #e3dac8;
    --color-border-strong: #c9bda3;

    --color-text: #1c1917;
    --color-text-muted: #57534e;
    --color-text-faint: #6f6a5e;
    /* --color-text-inverse stays dark: it is the text ON gold. */

    --color-brand-text: #a16207;
    --color-brand-soft: rgba(240, 185, 11, 0.22);
    --color-brand-grad: linear-gradient(90deg, #b45309, #f59e0b);
    --color-gold-line: rgba(161, 98, 7, 0.45);

    --color-success: #047857;
    --color-success-bg: rgba(4, 120, 87, 0.10);
    --color-danger: #dc2626;
    --color-warning: #b45309;
    --color-warning-bg: rgba(217, 119, 6, 0.13);

    --shadow-card: 0 24px 50px rgba(87, 70, 28, 0.14);
    --shadow-card-soft: 0 2px 10px rgba(87, 70, 28, 0.08);
    --shadow-card-hover: 0 18px 38px rgba(87, 70, 28, 0.16), 0 0 0 1px rgba(161, 98, 7, 0.35), 0 8px 24px rgba(240, 185, 11, 0.18);
    --shadow-qr: 0 10px 26px rgba(87, 70, 28, 0.16);
    --glow-btn: 0 10px 24px rgba(240, 185, 11, 0.38);
    --glow-btn-hover: 0 14px 30px rgba(240, 185, 11, 0.48);

    --glass-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 42%);
}