/**
 * design-tokens.css — Sistema de Tokens de Diseño IntelligentID
 * Soporta modo Claro, modo Oscuro (Bootstrap 5 data-bs-theme) y 4 Skins intercambiables.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS BASE (LIGHT THEME POR DEFECTO)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Tipografía y Espaciado ── */
    --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-radius-sm: 8px;
    --ds-radius: 14px;
    --ds-radius-lg: 20px;
    --ds-radius-full: 9999px;

    /* ── Sombras Base ── */
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --ds-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --ds-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --ds-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);

    /* ── Superficies y Neutros (Light) ── */
    --ds-surface: #ffffff;
    --ds-surface-subtle: #f8fafc;
    --ds-surface-card: #ffffff;
    --ds-surface-hover: #f1f5f9;
    --ds-border: #e2e8f0;
    --ds-border-subtle: #edf2f7;
    
    --ds-text-main: #1e293b;
    --ds-text-muted: #64748b;
    --ds-text-subtle: #94a3b8;

    /* ── Estados Semánticos ── */
    --ds-success: #10b981;
    --ds-success-bg: #dcfce7;
    --ds-success-text: #15803d;
    --ds-success-border: #bbf7d0;

    --ds-warning: #f59e0b;
    --ds-warning-bg: #fef3c7;
    --ds-warning-text: #b45309;
    --ds-warning-border: #fde68a;

    --ds-danger: #ef4444;
    --ds-danger-bg: #fee2e2;
    --ds-danger-text: #b91c1c;
    --ds-danger-border: #fca5a5;

    --ds-info: #0ea5e9;
    --ds-info-bg: #e0f2fe;
    --ds-info-text: #0369a1;
    --ds-info-border: #bae6fd;

    /* ── Skin por Defecto: AKAROM BLUE ── */
    --ds-primary: #1a7efb;
    --ds-primary-dark: #1260c4;
    --ds-primary-mid: #2563eb;
    --ds-primary-light: #dbeafe;
    --ds-primary-rgb: 26, 126, 251;
    --ds-primary-gradient: linear-gradient(135deg, #1a7efb 0%, #1260c4 100%);
    --ds-primary-shadow: 0 4px 14px rgba(26, 126, 251, 0.3);
    --ds-primary-glow: 0 0 0 3px rgba(26, 126, 251, 0.15);
    --ds-accent: #0284c7;

    /* Mapeo a variables de Bootstrap 5 / Tabler */
    --bs-primary: var(--ds-primary);
    --tblr-primary: var(--ds-primary);
    --bs-primary-rgb: var(--ds-primary-rgb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. DEFINICIÓN DE LOS 4 SKINS (PALETAS PRIMARIAS Y GRADIENTES)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SKIN 1: AZUL AKAROM PRO (Default) ── */
:root[data-skin="akarom"],
body[data-skin="akarom"] {
    --ds-primary: #1a7efb;
    --ds-primary-dark: #1260c4;
    --ds-primary-mid: #2563eb;
    --ds-primary-light: #dbeafe;
    --ds-primary-rgb: 26, 126, 251;
    --ds-primary-gradient: linear-gradient(135deg, #1a7efb 0%, #1260c4 100%);
    --ds-primary-shadow: 0 4px 14px rgba(26, 126, 251, 0.3);
    --ds-primary-glow: 0 0 0 3px rgba(26, 126, 251, 0.15);
    --ds-accent: #0284c7;
    --bs-primary: #1a7efb;
    --tblr-primary: #1a7efb;
    --bs-primary-rgb: 26, 126, 251;
}

/* ── SKIN 2: VERDE BIO ESMERALDA ── */
:root[data-skin="emerald"],
body[data-skin="emerald"] {
    --ds-primary: #059669;
    --ds-primary-dark: #047857;
    --ds-primary-mid: #10b981;
    --ds-primary-light: #d1fae5;
    --ds-primary-rgb: 5, 150, 105;
    --ds-primary-gradient: linear-gradient(135deg, #059669 0%, #065f46 100%);
    --ds-primary-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
    --ds-primary-glow: 0 0 0 3px rgba(5, 150, 105, 0.15);
    --ds-accent: #0d9488;
    --bs-primary: #059669;
    --tblr-primary: #059669;
    --bs-primary-rgb: 5, 150, 105;
}

/* ── SKIN 3: ÍNDIGO CYBER MODERN ── */
:root[data-skin="indigo"],
body[data-skin="indigo"] {
    --ds-primary: #6366f1;
    --ds-primary-dark: #4338ca;
    --ds-primary-mid: #4f46e5;
    --ds-primary-light: #e0e7ff;
    --ds-primary-rgb: 99, 102, 241;
    --ds-primary-gradient: linear-gradient(135deg, #6366f1 0%, #3730a3 100%);
    --ds-primary-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
    --ds-primary-glow: 0 0 0 3px rgba(99, 102, 241, 0.18);
    --ds-accent: #8b5cf6;
    --bs-primary: #6366f1;
    --tblr-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
}

/* ── SKIN 4: ÁMBAR / CORAL SUNSET ── */
:root[data-skin="sunset"],
body[data-skin="sunset"] {
    --ds-primary: #ea580c;
    --ds-primary-dark: #c2410c;
    --ds-primary-mid: #f97316;
    --ds-primary-light: #ffedd5;
    --ds-primary-rgb: 234, 88, 12;
    --ds-primary-gradient: linear-gradient(135deg, #ea580c 0%, #9a3412 100%);
    --ds-primary-shadow: 0 4px 14px rgba(234, 88, 12, 0.32);
    --ds-primary-glow: 0 0 0 3px rgba(234, 88, 12, 0.18);
    --ds-accent: #d97706;
    --bs-primary: #ea580c;
    --tblr-primary: #ea580c;
    --bs-primary-rgb: 234, 88, 12;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. MODO OSCURO (BOOTSTRAP 5 [data-bs-theme="dark"] & .dark)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"],
.dark,
.dark-theme {
    /* ── Superficies y Neutros (Dark) ── */
    --ds-surface: #1e2433;
    --ds-surface-subtle: #161b26;
    --ds-surface-card: #1e2433;
    --ds-surface-hover: #262e40;
    --ds-border: #2d3748;
    --ds-border-subtle: #242c3d;

    --ds-text-main: #f1f5f9;
    --ds-text-muted: #94a3b8;
    --ds-text-subtle: #64748b;

    /* ── Sombras Dark ── */
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ds-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
    --ds-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* ── Estados Semánticos (Dark) ── */
    --ds-success-bg: #14532d;
    --ds-success-text: #86efac;
    --ds-success-border: #166534;

    --ds-warning-bg: #78350f;
    --ds-warning-text: #fde68a;
    --ds-warning-border: #92400e;

    --ds-danger-bg: #7f1d1d;
    --ds-danger-text: #fca5a5;
    --ds-danger-border: #991b1b;

    --ds-info-bg: #0c4a6e;
    --ds-info-text: #7dd3fc;
    --ds-info-border: #0369a1;
}