/* ==========================================================================
   DESIGN TOKENS & THEMING SYSTEM
   Instituto de Educación Superior Tecnológico Público "Nueva Esperanza"
   ========================================================================== */

:root {
  /* Fonts */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  /* Typography Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevations / Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(26, 35, 126, 0.25);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-loader: 600;

  /* DEFAULT THEME: 1. Claro Institucional ISTENE */
  --primary: #122853;            /* Azul marino institucional ISTENE */
  --primary-hover: #0a1b3b;
  --primary-light: #e8eef8;
  --primary-rgb: 18, 40, 83;
  
  --secondary: #d32f2f;          /* Rojo flama ISTENE */
  --secondary-hover: #b71c1c;
  --secondary-light: #ffebee;
  --secondary-rgb: 211, 47, 47;

  --accent: #f57c00;             /* Dorado / Ámbar fuego */
  --accent-light: #fff3e0;

  --success: #2e7d32;
  --success-light: #e8f5e9;
  --warning: #ed6c02;
  --warning-light: #fff4e5;
  --danger: #d32f2f;
  --danger-light: #ffebee;
  --info: #0288d1;
  --info-light: #e1f5fe;

  --bg-body: #f4f6fa;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafc;
  --bg-card: #ffffff;
  --bg-sidebar: #0f1d38;
  --text-sidebar: #e2e8f0;
  --text-sidebar-muted: #94a3b8;
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: #122853;

  --badge-bg: #e2e8f0;
  --badge-text: #334155;

  --gradient-brand: linear-gradient(135deg, #122853 0%, #1e3a8a 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%);
}

/* ==========================================================================
   THEMES PALETTES
   ========================================================================== */

/* 2. Oscuro */
[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: rgba(59, 130, 246, 0.15);
  --primary-rgb: 59, 130, 246;

  --secondary: #ef4444;
  --secondary-hover: #f87171;
  --secondary-light: rgba(239, 68, 68, 0.15);

  --accent: #fbbf24;
  --accent-light: rgba(251, 191, 36, 0.15);

  --bg-body: #0b1120;
  --bg-surface: #1e293b;
  --bg-surface-alt: #162032;
  --bg-card: #1e293b;
  --bg-sidebar: #080d1a;
  --text-sidebar: #f8fafc;
  --text-sidebar-muted: #64748b;
  --sidebar-active-bg: rgba(59, 130, 246, 0.2);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  --border-color: #334155;
  --border-light: #1e293b;
  --border-focus: #3b82f6;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 25px rgba(59, 130, 246, 0.35);

  --gradient-brand: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

/* 3. Azul con degradados */
[data-theme="blue-gradient"] {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-rgb: 37, 99, 235;

  --secondary: #7c3aed;
  --secondary-hover: #6d28d9;
  --secondary-light: #f5f3ff;

  --accent: #06b6d4;
  --accent-light: #ecfeff;

  --bg-body: #f0f4ff;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8faff;
  --bg-card: #ffffff;
  --bg-sidebar: #0f172a;
  --text-sidebar: #e0e7ff;
  --text-sidebar-muted: #818cf8;
  --sidebar-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.4) 0%, rgba(124, 58, 237, 0.3) 100%);

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --border-color: #cbd5e1;
  --border-light: #e2e8f0;
  --border-focus: #2563eb;

  --gradient-brand: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #7c3aed 100%);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);
}

/* 4. Turquesa */
[data-theme="turquoise"] {
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-light: #f0fdfa;
  --primary-rgb: 13, 148, 136;

  --secondary: #0284c7;
  --secondary-hover: #0369a1;
  --secondary-light: #f0f9ff;

  --accent: #f59e0b;
  --accent-light: #fffbeb;

  --bg-body: #f4fbfb;
  --bg-surface: #ffffff;
  --bg-surface-alt: #ecfdf5;
  --bg-card: #ffffff;
  --bg-sidebar: #042f2e;
  --text-sidebar: #ccfbf1;
  --text-sidebar-muted: #5eead4;
  --sidebar-active-bg: rgba(20, 184, 166, 0.25);

  --text-primary: #134e4a;
  --text-secondary: #115e59;
  --text-muted: #52796f;
  --text-inverse: #ffffff;

  --border-color: #ccfbf1;
  --border-light: #e6fffa;
  --border-focus: #0d9488;

  --gradient-brand: linear-gradient(135deg, #115e59 0%, #0d9488 100%);
  --shadow-glow: 0 0 20px rgba(13, 148, 136, 0.25);
}

/* 5. Verde esmeralda */
[data-theme="emerald"] {
  --primary: #059669;
  --primary-hover: #047857;
  --primary-light: #ecfdf5;
  --primary-rgb: 5, 150, 105;

  --secondary: #0891b2;
  --secondary-hover: #0e7490;
  --secondary-light: #ecfeff;

  --accent: #eab308;
  --accent-light: #fefce8;

  --bg-body: #f2fbf6;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f0fdf4;
  --bg-card: #ffffff;
  --bg-sidebar: #064e3b;
  --text-sidebar: #d1fae5;
  --text-sidebar-muted: #6ee7b7;
  --sidebar-active-bg: rgba(16, 185, 129, 0.25);

  --text-primary: #064e3b;
  --text-secondary: #065f46;
  --text-muted: #4b7b69;
  --text-inverse: #ffffff;

  --border-color: #a7f3d0;
  --border-light: #d1fae5;
  --border-focus: #059669;

  --gradient-brand: linear-gradient(135deg, #065f46 0%, #059669 100%);
  --shadow-glow: 0 0 20px rgba(5, 150, 105, 0.25);
}

/* 6. Coral y Ámbar */
[data-theme="coral-amber"] {
  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-light: #fff7ed;
  --primary-rgb: 234, 88, 12;

  --secondary: #d97706;
  --secondary-hover: #b45309;
  --secondary-light: #fffbeb;

  --accent: #dc2626;
  --accent-light: #fef2f2;

  --bg-body: #fffaf5;
  --bg-surface: #ffffff;
  --bg-surface-alt: #fff4ed;
  --bg-card: #ffffff;
  --bg-sidebar: #431407;
  --text-sidebar: #ffedd5;
  --text-sidebar-muted: #fdba74;
  --sidebar-active-bg: rgba(249, 115, 22, 0.25);

  --text-primary: #431407;
  --text-secondary: #7c2d12;
  --text-muted: #9a3412;
  --text-inverse: #ffffff;

  --border-color: #fed7aa;
  --border-light: #ffedd5;
  --border-focus: #ea580c;

  --gradient-brand: linear-gradient(135deg, #9a3412 0%, #ea580c 100%);
  --shadow-glow: 0 0 20px rgba(234, 88, 12, 0.25);
}

/* 7. Alto contraste */
[data-theme="high-contrast"] {
  --primary: #ffff00;            /* Amarillo intenso */
  --primary-hover: #ffffff;
  --primary-light: #333300;
  --primary-rgb: 255, 255, 0;

  --secondary: #00ffff;          /* Cyan brillante */
  --secondary-hover: #ffffff;
  --secondary-light: #003333;

  --accent: #ff00ff;             /* Magenta */
  --accent-light: #330033;

  --success: #00ff00;
  --success-light: #002200;
  --warning: #ffff00;
  --warning-light: #222200;
  --danger: #ff3333;
  --danger-light: #330000;
  --info: #00ffff;
  --info-light: #002222;

  --bg-body: #000000;
  --bg-surface: #0a0a0a;
  --bg-surface-alt: #141414;
  --bg-card: #0a0a0a;
  --bg-sidebar: #000000;
  --text-sidebar: #ffffff;
  --text-sidebar-muted: #ffff00;
  --sidebar-active-bg: #ffff00;

  --text-primary: #ffffff;
  --text-secondary: #ffff00;
  --text-muted: #dddddd;
  --text-inverse: #000000;

  --border-color: #ffffff;
  --border-light: #ffffff;
  --border-focus: #ffff00;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: 0 0 0 2px #ffff00;

  --gradient-brand: #000000;
}