/* ============================================================
   CENTRO DE OPERACIONES PERSONAL
   css/variables.css — Sistema de diseño (tokens)
   ============================================================
   
   Todos los colores, tipografías y espaciados del sistema
   están definidos aquí como variables CSS.
   
   Para cambiar el tema visual, solo hay que modificar
   estas variables. No hay que tocar cada componente.
   
   PALETA: oscura, elegante, inspirada en terminales modernas.
   Combina el oscuro de FinanzasApp con la calidez de Sofía.
   ============================================================ */

:root {

    /* ── FONDOS ──────────────────────────────────────────── */
    --bg-base:      #080c14;    /* Fondo principal de la app */
    --bg-surface:   #0d1220;    /* Cards, sidebar */
    --bg-elevated:  #131929;    /* Cards elevadas, modales */
    --bg-overlay:   #1a2235;    /* Hover states, inputs */
    --bg-subtle:    #1f2840;    /* Bordes activos, separadores */

    /* ── BORDES ──────────────────────────────────────────── */
    --border:       #1e2d45;    /* Borde estándar */
    --border-soft:  #162036;    /* Borde muy suave */
    --border-active:#2d4a6e;    /* Borde activo/hover */

    /* ── TEXTO ───────────────────────────────────────────── */
    --text:         #dce8f5;    /* Texto principal */
    --text-muted:   #5a7a9e;    /* Texto secundario */
    --text-faint:   #2d4060;    /* Texto muy suave */
    --text-inverse: #080c14;    /* Texto sobre fondos claros */

    /* ── COLORES SEMÁNTICOS ──────────────────────────────── */
    /* Verde — ingresos, éxito, completado */
    --green:        #4ade80;
    --green-dim:    #0d2218;
    --green-mid:    #166534;

    /* Rojo — gastos, error, urgente */
    --red:          #f87171;
    --red-dim:      #2a0d0d;
    --red-mid:      #7f1d1d;

    /* Amarillo — advertencia, dólar, pendiente */
    --yellow:       #fbbf24;
    --yellow-dim:   #2a1f08;
    --yellow-mid:   #78350f;

    /* Azul — información, activo, principal */
    --blue:         #60a5fa;
    --blue-dim:     #0d1a2a;
    --blue-mid:     #1e3a5f;

    /* Violeta — metas de vida, Sofía */
    --purple:       #a78bfa;
    --purple-dim:   #1a0d2a;
    --purple-mid:   #3b1f6e;

    /* Teal — proyectos Kanban */
    --teal:         #2dd4bf;
    --teal-dim:     #0d2220;
    --teal-mid:     #134e4a;

    /* Naranja — personas, advertencia media */
    --orange:       #fb923c;
    --orange-dim:   #2a150d;
    --orange-mid:   #7c2d12;

    /* Rosa — etiquetas, decorativo */
    --pink:         #f472b6;
    --pink-dim:     #2a0d1a;

    /* ── COLORES POR MÓDULO ──────────────────────────────── */
    /* Cada módulo tiene su color identificador */
    --color-dashboard:       var(--blue);
    --color-sofia:           var(--purple);
    --color-finanzas:        var(--green);
    --color-kanban:          var(--teal);
    --color-personas:        var(--orange);
    --color-calendario:      var(--yellow);
    --color-automatizaciones:var(--pink);

    /* ── TIPOGRAFÍA ──────────────────────────────────────── */
    --font-display: 'Syne', sans-serif;              /* Títulos y headers */
    --font-body:    'Nunito', sans-serif;             /* Texto general */
    --font-mono:    'JetBrains Mono', monospace;      /* Números y código */

    /* ── TAMAÑOS DE FUENTE ───────────────────────────────── */
    --text-xs:   12px;    /* Mínimo legible en mobile (era 11px) */
    --text-sm:   13px;    /* era 12px */
    --text-base: 15px;    /* era 14px — font-size base del body */
    --text-md:   15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  30px;
    --text-4xl:  38px;

    /* ── ESPACIADO ───────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;

    /* ── RADIOS DE BORDE ─────────────────────────────────── */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full:9999px;

    /* ── SOMBRAS ─────────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
    --shadow:     0 4px 12px rgba(0,0,0,.5);
    --shadow-lg:  0 8px 28px rgba(0,0,0,.6);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.7);

    /* ── TRANSICIONES ────────────────────────────────────── */
    --transition-fast:   all .12s ease;
    --transition:        all .2s ease;
    --transition-slow:   all .35s ease;

    /* ── LAYOUT ──────────────────────────────────────────── */
    --sidebar-width:     220px;
    --bottom-nav-height: 70px;   /* altura de la barra mobile */
    --header-height:     56px;   /* altura del header mobile */
    --fab-size:          56px;   /* tamaño del botón FAB */

    /* ── TÁCTIL ──────────────────────────────────────────── */
    --touch-target:      44px;   /* target mínimo táctil — WCAG 2.5.5 */
}