/*
 * STX Design System V3 - Design Tokens
 * Sistema de variables CSS completo para el rediseno UI/UX
 * Se carga ANTES de main_v2.css desde top.php
 *
 * Fecha: 2026-02-11
 */

:root {
    /* ============================================
       COLORES - PRIMARY (evolucion del #0F5DAA)
       ============================================ */
    --stx-primary-50: #eff6ff;
    --stx-primary-100: #dbeafe;
    --stx-primary-200: #bfdbfe;
    --stx-primary-300: #93c5fd;
    --stx-primary-400: #60a5fa;
    --stx-primary-500: #3b82f6;
    --stx-primary-600: #2563eb;
    --stx-primary-700: #1d4ed8;
    --stx-primary-800: #1e40af;
    --stx-primary-900: #1e3a8a;

    /* ============================================
       NEUTRALES (gris-slate para interfaz)
       ============================================ */
    --stx-gray-50: #f8fafc;
    --stx-gray-100: #f1f5f9;
    --stx-gray-200: #e2e8f0;
    --stx-gray-300: #cbd5e1;
    --stx-gray-400: #94a3b8;
    --stx-gray-500: #64748b;
    --stx-gray-600: #475569;
    --stx-gray-700: #334155;
    --stx-gray-800: #1e293b;
    --stx-gray-900: #0f172a;

    /* ============================================
       SEMANTICOS
       ============================================ */
    --stx-success: #22c55e;
    --stx-success-light: #f0fdf4;
    --stx-success-dark: #15803d;

    --stx-warning: #f59e0b;
    --stx-warning-light: #fffbeb;
    --stx-warning-dark: #b45309;

    --stx-danger: #ef4444;
    --stx-danger-light: #fef2f2;
    --stx-danger-dark: #b91c1c;

    --stx-info: #0ea5e9;
    --stx-info-light: #f0f9ff;
    --stx-info-dark: #0369a1;

    /* ============================================
       BACKGROUNDS
       ============================================ */
    --bg-base: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-muted: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-sunken: #f1f5f9;

    /* ============================================
       TEXTO
       ============================================ */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-disabled: #cbd5e1;
    --text-inverse: #ffffff;
    --text-link: #2563eb;

    /* ============================================
       BORDES
       ============================================ */
    --border-subtle: #f1f5f9;
    --border-default: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-interactive: #2563eb;

    /* ============================================
       SPACING (base 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;

    /* ============================================
       TIPOGRAFIA
       ============================================ */
    --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ============================================
       BORDES REDONDEADOS
       ============================================ */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ============================================
       SOMBRAS
       ============================================ */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

    /* ============================================
       TRANSICIONES
       ============================================ */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 300ms ease;

    /* ============================================
       Z-INDEX
       ============================================ */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-tooltip: 500;
}