/* ==========================================================================
   TSC Design System v2 · «Deep Market» — TOKENS
   Fuente de verdad de color, tipografía, espacio, radio, sombra y movimiento.
   Claro en :root · Oscuro en .tsc-dark (MainLayout/AccountLayout la ponen en
   .tsc-root según la preferencia de tema). `:root:has(.tsc-dark)` propaga el
   oscuro a html/body y a lo que se monta fuera del contenedor (tooltips, etc.).
   Guía: docs/technical/design-system/tsc-design-system-v2.md §2
   ÚNICO fichero (junto a mud-overrides.css) donde se permiten hex.
   Contraste verificado (WCAG): todo token de texto/semántico ≥ 4,5:1 sobre bg-0, bg-1 y bg-2
   en ambos temas, y --tsc-on-accent sobre --tsc-accent ≥ 4,5:1.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Color · superficies --- */
    --tsc-bg-0: #f3f6fa;
    --tsc-bg-1: #ffffff;
    --tsc-bg-2: #e9eff6;
    --tsc-bg-3: #dde6f0;
    --tsc-border: rgba(15, 27, 45, .12);
    --tsc-border-strong: rgba(15, 27, 45, .24);

    /* --- Color · texto --- */
    --tsc-text-1: #0f1b2d;
    --tsc-text-2: #45566e;
    --tsc-text-3: #5b6b82;

    /* --- Color · marca y acción --- */
    --tsc-primary: #0e7490;
    --tsc-primary-rgb: 14, 116, 144;
    --tsc-primary-soft: rgba(14, 116, 144, .10);
    --tsc-accent: #4a780d;
    --tsc-accent-rgb: 74, 120, 13;
    --tsc-accent-soft: rgba(74, 120, 13, .12);
    --tsc-on-accent: #ffffff;
    --tsc-violet: #7c3aed;

    /* --- Color · semánticos (+ soft al 12–16 %) --- */
    --tsc-success: #147a3a;
    --tsc-success-soft: rgba(20, 122, 58, .12);
    --tsc-warning: #a94e08;
    --tsc-warning-soft: rgba(169, 78, 8, .12);
    --tsc-error: #b91c1c;
    --tsc-error-soft: rgba(185, 28, 28, .10);
    --tsc-info: #1d4ed8;
    --tsc-info-soft: rgba(29, 78, 216, .10);
    --tsc-muted-soft: rgba(15, 27, 45, .06);

    /* --- Degradados --- */
    --tsc-grad-hero: linear-gradient(135deg, #eaf3fb 0%, #f4f9fd 48%, #ffffff 100%);
    --tsc-grad-brand: linear-gradient(90deg, #0e7490 0%, #4a780d 100%);
    --tsc-grad-appbar: linear-gradient(90deg, rgba(255, 255, 255, .86) 0%, rgba(234, 243, 251, .86) 60%, rgba(255, 255, 255, .86) 100%);
    --tsc-grad-glow: radial-gradient(60% 60% at 80% 20%, rgba(14, 116, 144, .10), transparent 70%);
    --tsc-aurora-1: rgba(14, 116, 144, .14);
    --tsc-aurora-2: rgba(74, 120, 13, .10);
    --tsc-aurora-3: rgba(29, 78, 216, .10);

    /* --- Vidrio --- */
    --tsc-glass-bg: rgba(255, 255, 255, .72);
    --tsc-glass-blur: 14px;

    /* --- Tipografía --- */
    --tsc-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tsc-font-mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
    --tsc-fs-11: 11px;
    --tsc-fs-12: 12px;
    --tsc-fs-13: 13px;
    --tsc-fs-14: 14px;
    --tsc-fs-16: 16px;
    --tsc-fs-18: 18px;
    --tsc-fs-20: 20px;
    --tsc-fs-24: 24px;
    --tsc-fs-30: 30px;
    --tsc-fs-38: 38px;
    --tsc-lh-body: 1.5;
    --tsc-lh-title: 1.2;
    --tsc-eyebrow-tracking: .12em;

    /* --- Espacio (ritmo 4/8) --- */
    --tsc-sp-1: 4px;
    --tsc-sp-2: 8px;
    --tsc-sp-3: 12px;
    --tsc-sp-4: 16px;
    --tsc-sp-5: 24px;
    --tsc-sp-6: 32px;
    --tsc-sp-7: 48px;
    --tsc-sp-8: 64px;

    /* --- Radio --- */
    --tsc-r-sm: 8px;
    --tsc-r-md: 12px;
    --tsc-r-lg: 16px;
    --tsc-r-pill: 999px;

    /* --- Sombra (claro: 35 % de opacidad) --- */
    --tsc-shadow-1: 0 1px 2px rgba(15, 27, 45, .09);
    --tsc-shadow-2: 0 8px 24px rgba(15, 27, 45, .12);
    --tsc-shadow-glow: 0 0 0 1px var(--tsc-primary-soft), 0 10px 30px rgba(14, 116, 144, .08);

    /* --- Movimiento --- */
    --tsc-dur-fast: 120ms;
    --tsc-dur-base: 200ms;
    --tsc-dur-slow: 320ms;
    --tsc-ease: cubic-bezier(.22, 1, .36, 1);
    --tsc-ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* --- Layout --- */
    --tsc-appbar-h: 56px;
    --tsc-drawer-w: 264px;

    /* --- Gráficos (8 series, ver TscChartPalette.cs y tsc-ui.js) --- */
    --tsc-chart-1: #0e7490;
    --tsc-chart-2: #5f8f00;
    --tsc-chart-3: #1d4ed8;
    --tsc-chart-4: #7c3aed;
    --tsc-chart-5: #b45309;
    --tsc-chart-6: #be185d;
    --tsc-chart-7: #15803d;
    --tsc-chart-8: #64748b;
}

.tsc-dark,
:root:has(.tsc-dark) {
    color-scheme: dark;

    --tsc-bg-0: #070d17;
    --tsc-bg-1: #0b1424;
    --tsc-bg-2: #10203a;
    --tsc-bg-3: #162a4a;
    --tsc-border: rgba(148, 163, 184, .16);
    --tsc-border-strong: rgba(148, 163, 184, .32);

    --tsc-text-1: #e8eef8;
    --tsc-text-2: #a3b2c7;
    --tsc-text-3: #7a8ba3;

    --tsc-primary: #22d3ee;
    --tsc-primary-rgb: 34, 211, 238;
    --tsc-primary-soft: rgba(34, 211, 238, .14);
    --tsc-accent: #c6f24a;
    --tsc-accent-rgb: 198, 242, 74;
    --tsc-accent-soft: rgba(198, 242, 74, .16);
    --tsc-on-accent: #0b1424;
    --tsc-violet: #a78bfa;

    --tsc-success: #34d399;
    --tsc-success-soft: rgba(52, 211, 153, .14);
    --tsc-warning: #fbbf24;
    --tsc-warning-soft: rgba(251, 191, 36, .14);
    --tsc-error: #fb7185;
    --tsc-error-soft: rgba(251, 113, 133, .14);
    --tsc-info: #60a5fa;
    --tsc-info-soft: rgba(96, 165, 250, .14);
    --tsc-muted-soft: rgba(148, 163, 184, .12);

    --tsc-grad-hero: linear-gradient(135deg, #061225 0%, #0a2a3d 48%, #0d3b38 100%);
    --tsc-grad-brand: linear-gradient(90deg, #22d3ee 0%, #c6f24a 100%);
    --tsc-grad-appbar: linear-gradient(90deg, rgba(11, 20, 36, .82) 0%, rgba(15, 34, 56, .82) 60%, rgba(11, 20, 36, .82) 100%);
    --tsc-grad-glow: radial-gradient(60% 60% at 80% 20%, rgba(34, 211, 238, .18), transparent 70%);
    --tsc-aurora-1: rgba(34, 211, 238, .18);
    --tsc-aurora-2: rgba(198, 242, 74, .10);
    --tsc-aurora-3: rgba(96, 165, 250, .14);

    --tsc-glass-bg: rgba(11, 20, 36, .72);

    --tsc-shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
    --tsc-shadow-2: 0 8px 24px rgba(2, 8, 20, .45);
    --tsc-shadow-glow: 0 0 0 1px var(--tsc-primary-soft), 0 10px 30px rgba(34, 211, 238, .12);

    --tsc-chart-1: #22d3ee;
    --tsc-chart-2: #c6f24a;
    --tsc-chart-3: #60a5fa;
    --tsc-chart-4: #a78bfa;
    --tsc-chart-5: #fbbf24;
    --tsc-chart-6: #f472b6;
    --tsc-chart-7: #34d399;
    --tsc-chart-8: #94a3b8;
}

/* Base: lienzo, tipografía y números */
html,
body {
    background: var(--tsc-bg-0);
    color: var(--tsc-text-1);
    font-family: var(--tsc-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tsc-mono,
code,
kbd,
samp {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
}

.tsc-num {
    font-family: var(--tsc-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}