/* ======================================================
   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/.
   ====================================================== */

: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.80);

    /* ── 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.30);
    --re-emerald:       #00c9a7;
    --re-emerald-dim:   rgba(0, 201, 167, 0.14);
    --re-emerald-glow:  rgba(0, 201, 167, 0.28);
    --re-indigo:        #7875f0;
    --re-indigo-dim:    rgba(120, 117, 240, 0.14);
    --re-cyan:          #00d4f5;
    --re-cyan-dim:      rgba(0, 212, 245, 0.12);
    --re-rose:          #f87171;
    --re-rose-dim:      rgba(248, 113, 113, 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(120, 117, 240, 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:  #00d4f5;   /* cyan    – line 1 / primary series */
    --re-chart-2:  #7875f0;   /* indigo  – line 2 / secondary */
    --re-chart-3:  #f5a623;   /* gold    – highlight / CTA series */
    --re-chart-4:  #00c9a7;   /* emerald – positive bars */
    --re-chart-5:  #f87171;   /* rose    – negative bars */
    --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.50);
    --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.90);
    --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.20);
    --re-emerald:       #008f76;
    --re-emerald-dim:   rgba(0, 143, 118, 0.12);
    --re-emerald-glow:  rgba(0, 143, 118, 0.18);
    --re-indigo:        #4d49c8;
    --re-indigo-dim:    rgba(77, 73, 200, 0.12);
    --re-cyan:          #0099bb;
    --re-cyan-dim:      rgba(0, 153, 187, 0.10);
    --re-rose:          #d94545;
    --re-rose-dim:      rgba(217, 69, 69, 0.10);

    --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.40);
}