/* =============================================================================
   Tokens globales: Colores, Tipografía, Sombras y Radios.
   ============================================================================= */

:root {
    /* ── 1. PALETA CORPORATIVA (Logo Copasa) ── */
    --hub-dark: #00135b;
    --hub-dark-rgb: 0, 19, 91;
    --hub-primary: #006aff;
    --hub-primary-rgb: 0, 106, 255;
    --hub-primary-hover: #0056cc;

    /* Colores del emblema romboide */
    --copasa-red: #ff0000;
    --copasa-yellow: #ffaa00;
    --copasa-green: #008033;

    /* ── 2. ESCALA DE GRISES (Neutros) ── */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── 3. SEMÁNTICA DE COLORES (UI) ── */
    --primary: var(--hub-primary);
    --primary-rgb: var(--hub-primary-rgb);
    --primary-light: #e0f0ff;
    --primary-shadow: rgba(var(--hub-primary-rgb), 0.25);
    --primary-ring: rgba(var(--hub-primary-rgb), 0.15);
    --primary-shadow-strong: rgba(var(--hub-primary-rgb), 0.35);

    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --info: #0ea5e9;
    --info-rgb: 14, 165, 233;
    --info-light: #e0f2fe;

    /* ── 4. SUPERFICIES Y FONDOS ── */
    --bg-app: #f4f6f9;
    --card-bg: var(--white);
    --input-bg: var(--gray-50);
    --border-color: var(--gray-200);
    --surface-border-soft: rgba(0, 0, 0, 0.03);

    /* ── 5. TEXTO ── */
    --text-main: var(--gray-800);
    --text-muted: var(--gray-500);
    --text-light: var(--gray-400);

    /* ── 6. SIDEBAR ── */
    --sidebar-bg: var(--gray-900);
    --sidebar-hover: var(--gray-800);
    --sidebar-text: var(--gray-400);
    --sidebar-active: var(--white);
    --sidebar-width: 280px;

    /* ── 7. ESTADOS DE TABLA / BADGES ── */
    --status-new-bg: #dbeafe;
    --status-new-text: #1e40af;
    --status-process-bg: #fef3c7;
    --status-process-text: #b45309;
    --status-done-bg: #d1fae5;
    --status-done-text: #065f46;
    --status-danger-bg: #fee2e2;
    --status-danger-text: #991b1b;

    /* ── 7.1 TOKENS DE ICONOS DE MÓDULOS ── */
    --module-captacion-fg: var(--info);
    --module-captacion-bg: var(--info-light);
    --module-evaluacion-fg: var(--primary);
    --module-evaluacion-bg: var(--primary-light);
    --module-memoria-fg: var(--success);
    --module-memoria-bg: var(--status-done-bg);
    --module-presupuestos-fg: var(--warning);
    --module-presupuestos-bg: var(--status-process-bg);
    --module-proveedores-fg: var(--status-new-text);
    --module-proveedores-bg: var(--status-new-bg);
    --module-competencia-fg: var(--danger);
    --module-competencia-bg: var(--status-danger-bg);

    /* ── 8. RADIOS DE BORDE ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* ── 9. SOMBRAS DE ELEVACIÓN ── */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.07);

    /* ── 10. GRADIENTES BENTO / KPI ── */
    --grad-1: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    --grad-2: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
    --grad-3: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --grad-4: linear-gradient(135deg, #34d399 0%, #059669 100%);
    --grad-5: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    --grad-6: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-500) 100%);

    /* ── 11. GLASSMORPHISM ── */
    --alpha-white-05: rgba(var(--white-rgb), 0.05);
    --alpha-white-10: rgba(var(--white-rgb), 0.1);
    --alpha-white-30: rgba(var(--white-rgb), 0.3);
    --glass-bg: var(--alpha-white-05);
    --glass-border: var(--alpha-white-10);
    --glass-hover: var(--alpha-white-10);
}