/* ============================================================
   DESIGN SYSTEM — TOKENS
   FirmaSegura — Apple-like, sobrio, tecnológico.

   Estructura en 3 capas:
     1. Paleta cruda (--primary-500, --neutral-100, etc.)
     2. Tokens semánticos (--bg-page, --text-primary, etc.)
     3. Componentes (usan los semánticos, NO la paleta cruda)

   Modo oscuro: html[data-theme="dark"] o prefers-color-scheme.
   ============================================================ */

:root {
    /* =====================================================
       CAPA 1 — PALETA CRUDA
       Solo se referencia desde tokens semánticos.
       NO usar directamente en componentes.
       ===================================================== */
    /* ---- Azul de marca (#2e53b7) ---- */
    --primary-50: #eceff9;
    --primary-100: #ccd5f0;
    --primary-200: #91a7e3;
    --primary-300: #6483d8;
    --primary-400: #3b63ce;
    --primary-500: #2e53b7; /* Tono base de marca */
    --primary-600: #24459e;
    --primary-700: #1d3986;
    --primary-800: #162d69;
    --primary-900: #10204c;
    --primary-950: #0a1533;
    /* ---- Cian acento (#00c2cc) ---- */
    --accent-50: #e0fafb;
    --accent-100: #b3f1f3;
    --accent-200: #80e8eb;
    --accent-300: #66dde3;
    --accent-400: #33d0d6;
    --accent-500: #00c2cc; /* Tono base del acento */
    --accent-600: #009ba3;
    --accent-700: #00747a;
    --accent-800: #004d51;
    --accent-900: #002628;
    /* ---- Grises azulados (fríos) ---- */
    --neutral-0: #ffffff;
    --neutral-50: #e7f0fa;
    --neutral-100: #eef1f6;
    --neutral-200: #dde3ec;
    --neutral-300: #c4cdda;
    --neutral-400: #9aa6b9;
    --neutral-500: #6c7a91;
    --neutral-600: #4f5b71;
    --neutral-700: #394256;
    --neutral-800: #232b3d;
    --neutral-900: #141a28;
    --neutral-950: #0a0e17;
    /* ---- Estados ---- */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #dc2626;
    --danger-600: #b91c1c;
    --danger-700: #ef4444;
    --warning-50: #fef3c7;
    --warning-100: #fde68a;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    /* =====================================================
       CAPA 2 — TOKENS SEMÁNTICOS (MODO CLARO)
       Estos son los que se usan en componentes.
       ===================================================== */
    /* ---- Fondos ---- */
    --bg-page: var(--neutral-50); /* Fondo de página */
    --bg-card: var(--neutral-0); /* Cards, contenedores blancos */
    --bg-subtle: var(--neutral-100); /* Cards de soporte, secciones secundarias */
    --bg-elevated: var(--neutral-0); /* Modales */
    --bg-hover: var(--neutral-100); /* Hover sobre filas o botones planos */
    --bg-overlay: rgba(20, 26, 40, 0.5); /* Backdrop de modales */
    /* ---- Texto ---- */
    --text-primary: var(--neutral-900); /* Texto principal */
    --text-secondary: var(--neutral-600); /* Descripciones, labels */
    --text-muted: var(--neutral-400); /* Placeholders, info menor */
    --text-accent: var(--primary-500); /* Texto en azul de marca */
    --text-inverse: var(--neutral-0); /* Texto blanco sobre fondo de color */
    --text-success: var(--success-700);
    --text-danger: var(--danger-700);
    --text-warning: var(--warning-700);
    /* ---- Bordes ---- */
    --border: var(--neutral-200); /* Sutiles, cards/inputs */
    --border-strong: var(--neutral-300); /* Más visibles */
    --border-focus: var(--primary-500); /* Focus en inputs */
    /* ---- Botones ---- */
    --btn-primary-bg: var(--primary-500);
    --btn-primary-bg-hover: var(--primary-600);
    --btn-primary-text: var(--neutral-0);
    --btn-secondary-bg: var(--neutral-0);
    --btn-secondary-bg-hover: var(--neutral-100);
    --btn-secondary-text: var(--neutral-700);
    --btn-secondary-border: var(--neutral-300);
    --btn-ghost-bg: transparent;
    --btn-ghost-bg-hover: var(--neutral-100);
    --btn-ghost-text: var(--neutral-700);
    --btn-danger-bg: var(--danger-500);
    --btn-danger-bg-hover: var(--danger-600);
    --btn-danger-text: var(--neutral-0);
    /* ---- Acento (cian) ---- */
    --accent: var(--accent-500);
    --accent-hover: var(--accent-600);
    --accent-soft: rgba(0, 194, 204, 0.12); /* Cian al 12% para fondos sutiles */
    /* ---- Estados (badges, alerts) ---- */
    --state-success-bg: var(--success-50);
    --state-success-text: var(--success-700);
    --state-success-border: var(--success-100);
    --state-danger-bg: var(--danger-50);
    --state-danger-text: var(--danger-700);
    --state-danger-border: var(--danger-100);
    --state-warning-bg: var(--warning-50);
    --state-warning-text: var(--warning-700);
    --state-warning-border: var(--warning-100);
    --state-info-bg: var(--primary-50);
    --state-info-text: var(--primary-700);
    --state-info-border: var(--primary-100);
    /* =====================================================
       SOMBRAS, RADIOS, TRANSICIONES
       ===================================================== */
    /* Sombra estándar (sutil, Apple-like) */
    --shadow: 0 1px 3px rgba(20, 26, 40, 0.06), 0 1px 2px rgba(20, 26, 40, 0.04);
    --shadow-modal: 0 20px 60px rgba(20, 26, 40, 0.25);
    /* Radios */
    --radius-sm: 6px; /* Chips, badges */
    --radius-md: 8px; /* Botones, inputs (default) */
    --radius-lg: 12px; /* Cards, modales */
    --radius-xl: 16px; /* Cards grandes, hero */
    --radius-full: 9999px; /* Avatares, dots, pills */
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    /* =====================================================
       TIPOGRAFÍA
       ===================================================== */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    /* Escala */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    /* Pesos */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    /* =====================================================
       ESPACIADOS (sistema 4px)
       ===================================================== */

    --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;
    --space-16: 64px;
    /* =====================================================
       ICONOS
       ===================================================== */

    --icon-sm: 14px;
    --icon-md: 16px; /* default */
    --icon-lg: 20px;
    --icon-xl: 24px;
}


/* =====================================================
   MODO OSCURO
   Se activa con html[data-theme="dark"]
   También respeta prefers-color-scheme si no hay override.
   ===================================================== */

html[data-theme="dark"] {
    --bg-page:      var(--neutral-950);
    --bg-card:      var(--neutral-900);
    --bg-subtle:    var(--neutral-800);
    --bg-elevated:  var(--neutral-800);
    --bg-hover:     var(--neutral-800);
    --bg-overlay:   rgba(0, 0, 0, 0.7);

    --text-primary:   var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-muted:     var(--neutral-500);
    --text-accent:    var(--primary-300);
    --text-inverse:   var(--neutral-900);

    --border:         var(--neutral-700);
    --border-strong:  var(--neutral-600);
    --border-focus:   var(--primary-400);

    --btn-primary-bg:        var(--primary-500);
    --btn-primary-bg-hover:  var(--primary-400);
    --btn-primary-text:      var(--neutral-0);

    --btn-secondary-bg:        var(--neutral-800);
    --btn-secondary-bg-hover:  var(--neutral-700);
    --btn-secondary-text:      var(--neutral-100);
    --btn-secondary-border:    var(--neutral-700);

    --btn-ghost-bg:        transparent;
    --btn-ghost-bg-hover:  var(--neutral-800);
    --btn-ghost-text:      var(--neutral-200);

    --btn-danger-bg:        var(--danger-600);
    --btn-danger-bg-hover:  var(--danger-500);
    --btn-danger-text:      var(--neutral-0);

    --accent-soft:   rgba(0, 194, 204, 0.18);

    --state-success-bg:     rgba(16, 185, 129, 0.15);
    --state-success-text:   #6ee7b7;
    --state-success-border: rgba(16, 185, 129, 0.3);

    --state-danger-bg:      rgba(220, 38, 38, 0.15);
    --state-danger-text:    #fca5a5;
    --state-danger-border:  rgba(220, 38, 38, 0.3);

    --state-warning-bg:     rgba(245, 158, 11, 0.15);
    --state-warning-text:   #fcd34d;
    --state-warning-border: rgba(245, 158, 11, 0.3);

    --state-info-bg:        rgba(46, 83, 183, 0.18);
    --state-info-text:      #93c5fd;
    --state-info-border:    rgba(46, 83, 183, 0.4);

    --shadow:        0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-modal:  0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Auto dark mode si el SO lo prefiere y NO hay override manual */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg-page:      var(--neutral-950);
        --bg-card:      var(--neutral-900);
        --bg-subtle:    var(--neutral-800);
        --bg-elevated:  var(--neutral-800);
        --bg-hover:     var(--neutral-800);
        --bg-overlay:   rgba(0, 0, 0, 0.7);

        --text-primary:   var(--neutral-50);
        --text-secondary: var(--neutral-300);
        --text-muted:     var(--neutral-500);
        --text-accent:    var(--primary-300);
        --text-inverse:   var(--neutral-900);

        --border:         var(--neutral-700);
        --border-strong:  var(--neutral-600);
        --border-focus:   var(--primary-400);

        --btn-primary-bg:        var(--primary-500);
        --btn-primary-bg-hover:  var(--primary-400);
        --btn-primary-text:      var(--neutral-0);

        --btn-secondary-bg:        var(--neutral-800);
        --btn-secondary-bg-hover:  var(--neutral-700);
        --btn-secondary-text:      var(--neutral-100);
        --btn-secondary-border:    var(--neutral-700);

        --btn-ghost-bg:        transparent;
        --btn-ghost-bg-hover:  var(--neutral-800);
        --btn-ghost-text:      var(--neutral-200);

        --btn-danger-bg:        var(--danger-600);
        --btn-danger-bg-hover:  var(--danger-500);
        --btn-danger-text:      var(--neutral-0);

        --accent-soft: rgba(0, 194, 204, 0.18);

        --state-success-bg:     rgba(16, 185, 129, 0.15);
        --state-success-text:   #6ee7b7;
        --state-success-border: rgba(16, 185, 129, 0.3);

        --state-danger-bg:      rgba(220, 38, 38, 0.15);
        --state-danger-text:    #fca5a5;
        --state-danger-border:  rgba(220, 38, 38, 0.3);

        --state-warning-bg:     rgba(245, 158, 11, 0.15);
        --state-warning-text:   #fcd34d;
        --state-warning-border: rgba(245, 158, 11, 0.3);

        --state-info-bg:        rgba(46, 83, 183, 0.18);
        --state-info-text:      #93c5fd;
        --state-info-border:    rgba(46, 83, 183, 0.4);

        --shadow:        0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-modal:  0 20px 60px rgba(0, 0, 0, 0.7);
    }
}