/* ============================================================
   VARIABLES.CSS — Tokens globales del sistema de diseño
   Coordinación de Estudios · Ing. en Computación UAM-A
   ============================================================ */

:root {
  /* ── Colores institucionales UAM ── */
  --uam-red:        #8B0000;
  --uam-red-dark:   #5C0000;
  --uam-red-light:  #C41E3A;

  /* ── Azul marino institucional (hero, reflexión IA, sistemas) ── */
  --navy-deep:   #0f3460;
  --navy:        #16213e;
  --navy-dark:   #1a1a2e;

  /* ── Colores de áreas académicas (mapa curricular) ── */
  --area-math:    #f0a05a;
  --area-phys:    #e86a6a;
  --area-comp:    #5b8cff;
  --area-soft:    #6fcc9a;
  --area-nets:    #c084fc;
  --area-data:    #f472b6;
  --area-sys:     #60a5fa;
  --area-social:  #a78bfa;
  --area-integ:   #fb923c;

  /* ── Colores semánticos de categorías de noticias ── */
  --cat-ia:        #7B1FA2;
  --cat-mexico:    #2E7D32;
  --cat-global:    #1565C0;
  --cat-seguridad: #E65100;
  --cat-datos:     #00695C;
  --cat-evento:    #8B0000;
  --cat-hardware:  #5D4037;
  --cat-redes:     #00838F;

  /* ── Colores tecnológicos ── */
  --tech-blue:       #1A73E8;
  --tech-blue-dark:  #0D47A1;
  --tech-cyan:       #00BCD4;
  --tech-green:      #34A853;
  --tech-yellow:     #FBBC04;

  /* ── Alias semánticos ── */
  --color-primary:     var(--uam-red);
  --color-secondary:   var(--tech-blue);
  --color-success:     var(--tech-green);
  --color-warning:     var(--tech-yellow);

  /* Alias históricos mantenidos para compatibilidad con páginas actuales */
  --primary-color:   var(--uam-red);
  --secondary-color: var(--tech-blue);

  /* ── Escala de grises ── */
  --gray-50:   #FAFAFA;
  --gray-100:  #F3F3F3;
  --gray-200:  #ECECEC;
  --gray-300:  #E0E0E0;
  --gray-400:  #BDBDBD;
  --gray-500:  #9E9E9E;
  --gray-600:  #757575;
  --gray-700:  #616161;
  --gray-800:  #424242;
  --gray-900:  #212121;

  /* ── Colores de superficie ── */
  --bg-primary:    #FFFFFF;
  --bg-secondary:  var(--gray-50);
  --bg-dark:       var(--gray-900);

  /* Alias históricos */
  --background-primary:   var(--bg-primary);
  --background-secondary: var(--bg-secondary);
  --background-dark:      var(--bg-dark);

  /* ── Texto ── */
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-500);

  /* ── Tipografía ── */
  --font-heading: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Courier New', monospace;

  /* Escala tipográfica con fluid sizing */
  --text-h1:    clamp(2rem,   5vw, 3.5rem);
  --text-h2:    clamp(1.75rem, 4vw, 2.5rem);
  --text-h3:    clamp(1.25rem, 3vw, 1.75rem);
  --text-h4:    1.25rem;
  --text-base:  1rem;
  --text-sm:    0.875rem;
  --text-xs:    0.75rem;

  /* ── Espaciado ── */
  --spacing-xs:   0.5rem;   /*  8px */
  --spacing-sm:   1rem;     /* 16px */
  --spacing-md:   1.5rem;   /* 24px */
  --spacing-lg:   2rem;     /* 32px */
  --spacing-xl:   3rem;     /* 48px */
  --spacing-2xl:  4rem;     /* 64px */

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

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.14);

  /* ── Transiciones ── */
  --transition-fast:  150ms ease-in-out;
  --transition-base:  250ms ease-in-out;
  --transition-slow:  350ms ease-in-out;

  /* ── Layout ── */
  --container-max:  1200px;
  --nav-height:     72px;
}

/* Ajustes en móvil */
@media (max-width: 768px) {
  :root {
    --spacing-xl:  2rem;
    --spacing-2xl: 2.5rem;
  }
}