/**
 * css/variables.css — Sistema de diseño centralizado
 * 
 * Todos los tokens (colores, tipografía, espaciado, sombras) se definen
 * aquí. Importar en primer lugar en TODOS los archivos CSS del proyecto.
 * 
 * Paleta institucional: Comunidad Educativa Mi Guía
 * Primario: Violeta-Índigo (#667eea → #764ba2)
 * Sidebar:  Slate-900 (estilo EduSaaS)
 */

/* ============================================================
   TIPOGRAFÍA — Google Fonts via @import en cada hoja que use
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   TOKENS GLOBALES
   ============================================================ */
:root {
  /* --- Colores primarios institucionales --- */
  --color-primary:        #667eea;
  --color-primary-dark:   #764ba2;
  --color-primary-light:  #eef0fd;
  --color-primary-hover:  #5a6fd6;

  /* --- Degradado institucional --- */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-hero:    linear-gradient(135deg, #667eea 0%, #764ba2 60%, #5a4fcf 100%);

  /* --- Sidebar (EduSaaS Dark) --- */
  --sidebar-bg:        #1e293b;   /* slate-900 */
  --sidebar-border:    #334155;   /* slate-700 */
  --sidebar-text:      #94a3b8;   /* slate-400  */
  --sidebar-text-hover:#e2e8f0;   /* slate-200 */
  --sidebar-active:    #667eea;
  --sidebar-active-bg: rgba(102, 126, 234, 0.15);

  /* --- Colores de estado --- */
  --color-success:      #10b981;  /* emerald-500 */
  --color-success-bg:   #d1fae5;
  --color-success-text: #065f46;

  --color-warning:      #f59e0b;  /* amber-500 */
  --color-warning-bg:   #fef3c7;
  --color-warning-text: #92400e;

  --color-danger:       #ef4444;  /* red-500 */
  --color-danger-bg:    #fee2e2;
  --color-danger-text:  #991b1b;

  --color-info:         #3b82f6;  /* blue-500 */
  --color-info-bg:      #dbeafe;
  --color-info-text:    #1e40af;

  /* --- Neutros --- */
  --color-bg:           #f1f5f9;  /* slate-100 */
  --color-surface:      #ffffff;
  --color-border:       #e2e8f0;  /* slate-200 */
  --color-text:         #1e293b;  /* slate-900 */
  --color-text-muted:   #64748b;  /* slate-500 */
  --color-text-light:   #94a3b8;  /* slate-400 */

  /* --- Topbar y Header --- */
  --topbar-height: 64px;
  --sidebar-width: 260px;

  /* --- Radios de borde --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.12);

  /* --- Espaciado base (múltiplos de 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;

  /* --- Tipografía --- */
  --font-family:   'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-md:  15px;
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --font-size-2xl: 28px;

  /* --- Transiciones --- */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.25s ease;
  --transition-slow:   all 0.4s ease;

  /* --- Z-index layers --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-toast:     400;
  --z-overlay:   500;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
}