/* ======================================================
   REAL ESTATE PREMIUM DESIGN SYSTEM — CSS TOKENS
   Deep Navy finance theme for all real estate tools.
   Prefix: --re-  (safe — won't clash with --calc-*)

   LOAD ORDER: must be loaded AFTER tokens.css, BEFORE
   components.css / formulas.css / tabs.css / tables.css.
   Only required on pages under finance-wealth/real-estate/.

   v3 (2026-04-29): --re-cyan, --re-indigo, --re-rose
   nudged to match the --calc-* v3 brand palette so RE
   pages don't visually drift from the rest of the site.
   --re-gold and --re-emerald (the RE signature accents)
   are unchanged — they're what makes the RE subsystem
   feel "premium."
   ====================================================== */

:root {
    /* ── RE SURFACES (deep navy layers) ── */
    --re-bg-page: #07101f;
    --re-bg-primary: #0c1825;
    --re-bg-card: #111d2e;
    --re-bg-elevated: #162336;
    --re-bg-input: #0f1e30;
    --re-bg-glass: rgba(11, 24, 44, 0.72);
    --re-bg-hover: #1c2d44;
    --re-bg-overlay: rgba(4, 10, 22, 0.8);

    /* ── RE TEXT ── */
    --re-text-heading: #e8edf5;
    --re-text-body: #8fa5c8;
    --re-text-faint: #6b85a6;
    --re-text-mono: #c8d8f0;

    /* ── RE ACCENT PALETTE ── */
    --re-gold: #f5a623;
    --re-gold-light: #f7c06e;
    --re-gold-dim: rgba(245, 166, 35, 0.14);
    --re-gold-glow: rgba(245, 166, 35, 0.3);
    --re-emerald: #00c9a7;
    --re-emerald-dim: rgba(0, 201, 167, 0.14);
    --re-emerald-glow: rgba(0, 201, 167, 0.28);
    --re-indigo: #818cf8;
    --re-indigo-dim: rgba(129, 140, 248, 0.14);
    --re-cyan: #22d3ee;
    --re-cyan-dim: rgba(34, 211, 238, 0.12);
    --re-rose: #fb7185;
    --re-rose-dim: rgba(251, 113, 133, 0.14);
    --re-amber: #f59e0b;

    /* ── RE BORDERS ── */
    --re-border-card: rgba(255, 255, 255, 0.07);
    --re-border-input: rgba(255, 255, 255, 0.09);
    --re-border-focus: rgba(245, 166, 35, 0.55);
    --re-border-top-gold: 3px solid var(--re-gold);
    --re-border-top-emerald: 3px solid var(--re-emerald);
    --re-border-top-indigo: 3px solid var(--re-indigo);
    --re-border-top-cyan: 3px solid var(--re-cyan);

    /* ── RE SHADOWS ── */
    --re-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
    --re-shadow-deep: 0 8px 40px rgba(0, 0, 0, 0.55);
    --re-glow-gold: 0 0 24px rgba(245, 166, 35, 0.28);
    --re-glow-emerald: 0 0 24px rgba(0, 201, 167, 0.26);
    --re-glow-indigo: 0 0 24px rgba(129, 140, 248, 0.26);

    /* ── RE TYPOGRAPHY (metrics + labels) ── */
    --re-metric-size: clamp(2.4rem, 5vw, 3.4rem);
    --re-metric-size-sm: clamp(1.6rem, 3vw, 2rem);
    --re-label-size: 0.7rem;
    --re-label-tracking: 0.08em;

    /* ── RE CHART PALETTE ── */
    --re-chart-1: #22d3ee; /* cyan    – line 1 / primary series (synced w/ --calc-cyan v3) */
    --re-chart-2: #818cf8; /* indigo  – line 2 / secondary (synced w/ --calc-indigo v3) */
    --re-chart-3: #f5a623; /* gold    – highlight / CTA series (RE signature, kept) */
    --re-chart-4: #00c9a7; /* emerald – positive bars (RE signature, kept) */
    --re-chart-5: #fb7185; /* rose    – negative bars (synced w/ --calc-rose v3) */
    --re-chart-6: #f59e0b; /* amber   – warning series */
    --re-chart-7: #a78bfa; /* violet  – 7th series */
    --re-chart-8: #34d399; /* green   – 8th series */

    /* ── RE INTERACTION ── */
    --re-transition: 250ms ease;
    --re-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --re-gold-ring: 0 0 0 3px rgba(245, 166, 35, 0.18), 0 0 0 1px rgba(245, 166, 35, 0.5);
    --re-radius-tab: 999px;
    --re-radius-card: 14px;
    --re-radius-input: 10px;
    --re-radius-badge: 6px;
}

/* ── RE LIGHT MODE OVERRIDES ── */
[data-theme='light'] {
    --re-bg-page: #f0f4fb;
    --re-bg-primary: #eaf0f9;
    --re-bg-card: #ffffff;
    --re-bg-elevated: #f5f8fd;
    --re-bg-input: #e8eef7;
    --re-bg-glass: rgba(255, 255, 255, 0.9);
    --re-bg-hover: #dce6f5;
    --re-bg-overlay: rgba(0, 0, 0, 0.35);

    --re-text-heading: #0f1e33;
    --re-text-body: #2d4a6b;
    --re-text-faint: #4e6585;
    --re-text-mono: #1e3350;

    --re-gold: #c47a0a;
    --re-gold-light: #e0950f;
    --re-gold-dim: rgba(196, 122, 10, 0.12);
    --re-gold-glow: rgba(196, 122, 10, 0.2);
    --re-emerald: #008f76;
    --re-emerald-dim: rgba(0, 143, 118, 0.12);
    --re-emerald-glow: rgba(0, 143, 118, 0.18);
    --re-indigo: #4f46e5;
    --re-indigo-dim: rgba(79, 70, 229, 0.12);
    --re-cyan: #0891b2;
    --re-cyan-dim: rgba(8, 145, 178, 0.1);
    --re-rose: #e11d48;
    --re-rose-dim: rgba(225, 29, 72, 0.1);

    --re-border-card: rgba(0, 0, 0, 0.09);
    --re-border-input: rgba(0, 0, 0, 0.13);
    --re-border-focus: rgba(196, 122, 10, 0.55);

    --re-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
    --re-shadow-deep: 0 4px 20px rgba(0, 0, 0, 0.12);
    --re-glow-gold: 0 0 0 transparent;
    --re-glow-emerald: 0 0 0 transparent;
    --re-glow-indigo: 0 0 0 transparent;
    --re-gold-ring: 0 0 0 3px rgba(196, 122, 10, 0.15), 0 0 0 1px rgba(196, 122, 10, 0.4);
}