/*
 * Elysium Patrimonio — tokens.
 *
 * La base es la de Elysium (CSS/base.css): medianoche, platino, azul #2997ff,
 * cristal y la fuente del sistema. Lo propio de Patrimonio es el oro #D4AF37
 * como acento del patrimonio (metas, logros, progreso) y el guilloché.
 *
 * Tema oscuro «Medianoche» por defecto; tema claro «Marfil» con
 * data-theme="light"; sin atributo, sigue al sistema.
 *
 * Los colores de las series de gráficas (--c-income, --c-expense, --c-net)
 * están validados con el script del skill de visualización contra la
 * superficie de cada tema: separación para daltonismo ≥ 9,2 ΔE en todos los
 * pares y contraste ≥ 3:1 salvo el aqua en Marfil (2,77), que por eso va
 * siempre con leyenda y valores visibles.
 */

:root {
    color-scheme: dark;

    /* Fondo Bóveda Privada: obsidiana cálida con auras sutiles de oro y prosperidad */
    --bg: #080c14;
    --bg-2: #0e1422;
    --glow-1: rgba(220, 179, 92, 0.08);
    --glow-2: rgba(16, 185, 129, 0.06);
    --glow-gold: rgba(220, 179, 92, 0.18);
    --glow-emerald: rgba(16, 185, 129, 0.18);

    /* Superficies de cristal ahumado cálido con bisel de luz */
    --surface: rgba(16, 23, 36, 0.74);
    --surface-solid: #101826;
    --surface-2: rgba(22, 32, 50, 0.82);
    --surface-3: #182438;
    --surface-hover: rgba(36, 50, 76, 0.55);
    --surface-sunken: rgba(6, 10, 18, 0.5);
    --line: rgba(235, 230, 218, 0.08);
    --line-strong: rgba(235, 230, 218, 0.16);
    --highlight: rgba(255, 255, 255, 0.08);

    --text: #f4f6fa;
    --text-2: #a4adbe;
    --text-3: #70798e;
    --text-inverse: #080c14;

    /* Acento zafiro noble */
    --accent: #3b82f6;
    --accent-strong: #60a5fa;
    --accent-soft: rgba(59, 130, 246, 0.14);
    --accent-line: rgba(59, 130, 246, 0.35);
    --on-accent: #ffffff;

    /* Oro Champaña de Bóveda: metas, patrimonio, logros y prestigio */
    --gold: #dcb35c;
    --gold-hi: #faeec7;
    --gold-lo: #9a7424;
    --gold-soft: rgba(220, 179, 92, 0.13);
    --gold-line: rgba(220, 179, 92, 0.32);
    --gold-text: #f3d489;
    --on-gold: #151105;

    /* Código cromático financiero: Esmeralda (Prosperidad) y Coral Terciopelo (Gastos) */
    --pos: #10b981;
    --neg: #f43f5e;

    --ok: #10b981;
    --warn: #f59e0b;
    --danger: #f43f5e;
    --info: #38bdf8;
    --ok-soft: rgba(16, 185, 129, 0.14);
    --warn-soft: rgba(245, 158, 11, 0.14);
    --danger-soft: rgba(244, 63, 94, 0.14);
    --tone-ok: var(--ok);
    --tone-warning: var(--warn);
    --tone-pace: var(--warn);
    --tone-over: var(--danger);
    --tone-accent: var(--accent);

    /* Gráficas unificadas con el código financiero */
    --c-income: #10b981;
    --c-expense: #f43f5e;
    --c-net: #34d399;
    --c-gold: #dcb35c;
    --chart-grid: rgba(235, 230, 218, 0.07);
    --chart-zero: rgba(235, 230, 218, 0.2);
    --chart-axis: #70798e;
    --chart-band: rgba(235, 230, 218, 0.045);
    --heat-0: rgba(235, 230, 218, 0.05);
    --heat-1: #153835;
    --heat-2: #165b4c;
    --heat-3: #10b981;
    --heat-4: #6ee7b7;

    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius: 18px;
    --radius-sm: 13px;
    --radius-xs: 9px;
    --radius-pill: 999px;

    --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
    --shadow-pop: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--line-strong);
    --blur: saturate(170%) blur(24px);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --sidebar-w: 260px;
    --rail-w: 84px;
    --tabbar-h: 66px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --gutter: clamp(16px, 3vw, 40px);
}

/* Marfil de Bóveda: pergamino refinado, oro cálido y contrastes nobles. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f8f6f0;
    --bg-2: #efebe0;
    --glow-1: rgba(184, 138, 40, 0.08);
    --glow-2: rgba(16, 163, 74, 0.06);
    --glow-gold: rgba(184, 138, 40, 0.14);
    --glow-emerald: rgba(16, 163, 74, 0.12);
    --surface: rgba(255, 255, 255, 0.86);
    --surface-solid: #fffdf9;
    --surface-2: rgba(248, 245, 238, 0.95);
    --surface-3: #ece6d8;
    --surface-hover: rgba(238, 232, 220, 0.65);
    --surface-sunken: rgba(232, 226, 212, 0.5);
    --line: rgba(35, 30, 20, 0.08);
    --line-strong: rgba(35, 30, 20, 0.16);
    --highlight: rgba(255, 255, 255, 0.7);
    --text: #16181d;
    --text-2: #545b6a;
    --text-3: #8a909f;
    --text-inverse: #fffdf9;
    --accent: #1d6fe5;
    --accent-strong: #1255b8;
    --accent-soft: rgba(29, 111, 229, 0.1);
    --accent-line: rgba(29, 111, 229, 0.3);
    --gold: #b38825;
    --gold-hi: #ebd082;
    --gold-lo: #7c5c0e;
    --gold-soft: rgba(179, 136, 37, 0.12);
    --gold-line: rgba(179, 136, 37, 0.35);
    --gold-text: #8c670f;
    --pos: #0f9f59;
    --neg: #e11d48;
    --ok: #0f9f59;
    --warn: #b45309;
    --danger: #e11d48;
    --info: #0284c7;
    --ok-soft: rgba(15, 159, 89, 0.1);
    --warn-soft: rgba(180, 83, 9, 0.11);
    --danger-soft: rgba(225, 29, 72, 0.09);
    --c-income: #0f9f59;
    --c-expense: #e11d48;
    --c-net: #059669;
    --c-gold: #b38825;
    --chart-grid: rgba(35, 30, 20, 0.07);
    --chart-zero: rgba(35, 30, 20, 0.22);
    --chart-axis: #8a909f;
    --chart-band: rgba(35, 30, 20, 0.04);
    --heat-0: rgba(35, 30, 20, 0.06);
    --heat-1: #d1fae5;
    --heat-2: #6ee7b7;
    --heat-3: #10b981;
    --heat-4: #047857;
    --shadow: 0 30px 60px -32px rgba(60, 48, 20, 0.3), 0 1px 3px rgba(60, 48, 20, 0.08);
    --shadow-soft: 0 12px 28px -18px rgba(60, 48, 20, 0.3);
    --shadow-pop: 0 40px 90px -30px rgba(60, 48, 20, 0.45), 0 0 0 1px var(--line-strong);
}

/* Sin elección explícita, sigue al sistema. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --bg: #f8f6f0;
        --bg-2: #efebe0;
        --glow-1: rgba(184, 138, 40, 0.08);
        --glow-2: rgba(16, 163, 74, 0.06);
        --glow-gold: rgba(184, 138, 40, 0.14);
        --glow-emerald: rgba(16, 163, 74, 0.12);
        --surface: rgba(255, 255, 255, 0.86);
        --surface-solid: #fffdf9;
        --surface-2: rgba(248, 245, 238, 0.95);
        --surface-3: #ece6d8;
        --surface-hover: rgba(238, 232, 220, 0.65);
        --surface-sunken: rgba(232, 226, 212, 0.5);
        --line: rgba(35, 30, 20, 0.08);
        --line-strong: rgba(35, 30, 20, 0.16);
        --highlight: rgba(255, 255, 255, 0.7);
        --text: #16181d;
        --text-2: #545b6a;
        --text-3: #8a909f;
        --text-inverse: #fffdf9;
        --accent: #1d6fe5;
        --accent-strong: #1255b8;
        --accent-soft: rgba(29, 111, 229, 0.1);
        --accent-line: rgba(29, 111, 229, 0.3);
        --gold: #b38825;
        --gold-hi: #ebd082;
        --gold-lo: #7c5c0e;
        --gold-soft: rgba(179, 136, 37, 0.12);
        --gold-line: rgba(179, 136, 37, 0.35);
        --gold-text: #8c670f;
        --pos: #0f9f59;
        --neg: #e11d48;
        --ok: #0f9f59;
        --warn: #b45309;
        --danger: #e11d48;
        --info: #0284c7;
        --ok-soft: rgba(15, 159, 89, 0.1);
        --warn-soft: rgba(180, 83, 9, 0.11);
        --danger-soft: rgba(225, 29, 72, 0.09);
        --c-income: #0f9f59;
        --c-expense: #e11d48;
        --c-net: #059669;
        --c-gold: #b38825;
        --chart-grid: rgba(35, 30, 20, 0.07);
        --chart-zero: rgba(35, 30, 20, 0.22);
        --chart-axis: #8a909f;
        --chart-band: rgba(35, 30, 20, 0.04);
        --heat-0: rgba(35, 30, 20, 0.06);
        --heat-1: #d1fae5;
        --heat-2: #6ee7b7;
        --heat-3: #10b981;
        --heat-4: #047857;
        --shadow: 0 30px 60px -32px rgba(60, 48, 20, 0.3), 0 1px 3px rgba(60, 48, 20, 0.08);
        --shadow-soft: 0 12px 28px -18px rgba(60, 48, 20, 0.3);
        --shadow-pop: 0 40px 90px -30px rgba(60, 48, 20, 0.45), 0 0 0 1px var(--line-strong);
    }
}

/* Oscuro elegido a mano: gana aunque el sistema esté en claro. */
:root[data-theme="dark"] {
    color-scheme: dark;
}