/* =====================================================================
   CLIC404 — tokens.css
   Design System unificado: colores, spacing, radius, shadow, typography,
   z-index. Fuente única de verdad. No modificar valores localmente:
   redefinir solo en este archivo. Migración de style.min.css, dashboard.css
   y auth.css a estos var() viene en Tren C P1-C.
   ===================================================================== */

:root {
    /* ───────────────────────────── COLOR — BLUE RAMP (primary, base #2563eb) */
    --color-blue-50:  #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;

    /* ───────────────────────────── COLOR — CYAN RAMP (accent, base #06b6d4) */
    --color-cyan-50:  #ecfeff;
    --color-cyan-100: #cffafe;
    --color-cyan-200: #a5f3fc;
    --color-cyan-300: #67e8f9;
    --color-cyan-400: #22d3ee;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;
    --color-cyan-700: #0e7490;
    --color-cyan-800: #155e75;
    --color-cyan-900: #164e63;

    /* ───────────────────────────── COLOR — VIOLET RAMP (alt-accent, base #6366f1) */
    --color-violet-50:  #eef2ff;
    --color-violet-100: #e0e7ff;
    --color-violet-200: #c7d2fe;
    --color-violet-300: #a5b4fc;
    --color-violet-400: #818cf8;
    --color-violet-500: #6366f1;
    --color-violet-600: #4f46e5;
    --color-violet-700: #4338ca;
    --color-violet-800: #3730a3;
    --color-violet-900: #312e81;

    /* ───────────────────────────── COLOR — SEMANTIC */
    --color-primary:       var(--color-blue-600);
    --color-primary-600:   var(--color-blue-600);
    --color-primary-700:   var(--color-blue-700);
    --color-accent:        var(--color-cyan-500);
    --color-accent-alt:    var(--color-violet-500);
    --color-success:       #10b981;
    --color-success-bg:    rgba(16, 185, 129, 0.10);
    --color-warning:       #f59e0b;
    --color-warning-bg:    rgba(245, 158, 11, 0.10);
    --color-danger:        #ef4444;
    --color-danger-bg:     rgba(239, 68, 68, 0.10);
    --color-info:          var(--color-blue-400);

    /* ───────────────────────────── COLOR — SURFACES */
    --color-bg:         #060b14;
    --color-surface:    #111827;
    --color-surface-2:  #1a2538;
    --color-border:     #1e2d40;
    --color-border-2:   #263348;

    /* ───────────────────────────── COLOR — TEXT (WCAG AA ≥4.5:1 sobre --color-bg / --color-surface) */
    --color-text:    #f0f4ff;   /* primary text */
    --color-text-2:  #8fa3c0;   /* muted text */
    --color-text-3:  #7d92b3;   /* tertiary text (rebalanceado desde #4a6080 que no pasaba AA) */

    /* ───────────────────────────── SPACING — 4px grid, rem-based */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-7:  2rem;      /* 32px */
    --space-8:  2.5rem;    /* 40px */
    --space-9:  3rem;      /* 48px */
    --space-10: 4rem;      /* 64px */

    /* ───────────────────────────── RADIUS */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 9999px;

    /* ───────────────────────────── SHADOW */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg:    0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.30);

    /* ───────────────────────────── TYPOGRAPHY — Family */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ───────────────────────────── TYPOGRAPHY — Size scale */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.25rem;    /* 20 */
    --text-2xl:  1.5rem;     /* 24 */
    --text-3xl:  1.875rem;   /* 30 */
    --text-4xl:  2.25rem;    /* 36 */

    /* ───────────────────────────── Z-INDEX SCALE */
    --z-base:    1;
    --z-sticky:  100;
    --z-nav:     1000;
    --z-modal:   1050;
    --z-toast:   1100;
    --z-tooltip: 1150;
}