/* ============================================================
   Codex Design Tokens — paleta light "home banking" v2 (2026-05-27)
   ------------------------------------------------------------
   Single source of truth de colores, espaciados, radios, sombras
   y tipografia. Cualquier estilo del proyecto debe consumir estas
   variables — NO hardcodear hex/px en componentes.

   Mirror del MudTheme en Components/Shared/CodexTheme.cs.
   Cualquier cambio aca debe replicarse alla (y viceversa).
   ============================================================ */

:root {
    /* ---------- Color · superficies ---------- */
    --bg-canvas:        #eef0f3;   /* fondo de la app (gris muy claro, neutro-fresco) */
    --surface:          #ffffff;   /* tarjetas, paneles, modales */
    --surface-2:        #f3f5f8;   /* header de tablas, hover sutil */
    --surface-3:        #fafbfc;   /* fondo de inputs, secciones embebidas */
    --surface-elevated: #ffffff;

    /* ---------- Color · texto ---------- */
    --text-primary:   #1c1f28;   /* titulares, montos, datos clave */
    --text-secondary: #565b66;   /* labels, descripciones, body */
    --text-muted:     #9aa0ab;   /* metadata, hints, placeholders */
    --text-on-accent: #ffffff;
    --text-on-dark:   #fafafa;   /* sobre sidebar oscuro */

    /* ---------- Color · acentos (azul vibrante "royal blue") ---------- */
    --accent:         #2f6ee0;   /* CTAs primarias, focus, totales — vibrante */
    --accent-hover:   #2557b8;
    --accent-soft:    #eaf1fc;   /* fondo chips/badges/highlight sutil */
    --accent-strong:  #1f4fa0;   /* emphasis intenso */
    --accent-gradient: linear-gradient(135deg, #2f6ee0 0%, #7a4adf 100%);  /* logo Codex */

    /* ---------- Color · semaforicos ---------- */
    --success:        #16a34a;
    --success-soft:   #dcfce7;
    --warning:        #d97706;
    --warning-soft:   #fef3c7;
    --warning-bright: #facc15;
    --danger:         #dc2626;
    --danger-soft:    #fee2e2;
    --info:           #0891b2;
    --info-soft:      #cffafe;

    /* ---------- Color · bordes ---------- */
    --border:         #d8dde4;   /* default */
    --border-strong:  #c4cbd5;   /* hover/focus de inputs, énfasis */
    --border-focus:   var(--accent);

    /* ---------- Color · sidebar oscuro (NUEVO v2) ---------- */
    --sidebar-bg:           #2b2f3a;   /* dark pizarra (no negro) */
    --sidebar-bg-elevated:  #353a47;   /* hover sutil */
    --sidebar-item:         #3a3f4d;   /* item rest si necesita fondo */
    --sidebar-text:         #c5cad3;
    --sidebar-text-muted:   #8b919c;
    --sidebar-text-active:  #ffffff;
    --sidebar-active-bg:    rgba(47, 110, 224, 0.18);
    --sidebar-active-bar:   #2f6ee0;
    --sidebar-divider:      #3a3f4d;

    /* ---------- Radius (más generoso v2) ---------- */
    --radius-sm:    8px;
    --radius:       14px;   /* default cards, paneles, modales */
    --radius-lg:    18px;
    --radius-xl:    24px;
    --radius-input: 10px;   /* inputs y botones — escala intermedia */
    --radius-pill:  999px;

    /* ---------- Shadows (sutiles, light theme) ---------- */
    --shadow-1: 0 1px 2px 0 rgba(28, 31, 40, 0.04);
    --shadow-2: 0 4px 12px -2px rgba(28, 31, 40, 0.08), 0 2px 4px -2px rgba(28, 31, 40, 0.04);
    --shadow-3: 0 12px 32px -8px rgba(28, 31, 40, 0.12), 0 4px 8px -4px rgba(28, 31, 40, 0.06);
    --shadow-focus: 0 0 0 3px rgba(47, 110, 224, 0.20);

    /* ---------- Spacing escala 4px ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ---------- Tipografia ---------- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;   /* títulos grandes peso 700-800 */
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   16px;
    --fs-lg:   20px;
    --fs-xl:   24px;
    --fs-2xl:  32px;
    --fs-3xl:  40px;   /* títulos de página */
    --fs-4xl:  56px;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;   /* títulos de página tipo "Clientes" */

    --lh-tight:  1.2;
    --lh-base:   1.5;
    --lh-loose:  1.7;

    /* ---------- Motion ---------- */
    --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast:   120ms;
    --t-base:   180ms;
    --t-slow:   320ms;

    /* ---------- Componentes derivados ---------- */
    --chip-bg:        var(--surface-2);
    --chip-color:     var(--text-secondary);
    --chip-accent-bg: var(--accent-soft);
    --chip-accent-color: var(--accent-strong);

    --input-bg:     var(--surface-3);   /* fondo casi blanco con leve tinte */
    --input-border: var(--border-strong);
    --input-focus:  var(--accent);
    --input-radius: var(--radius-input);
}

/* Body baseline */
html, body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--bg-canvas);
}