/* ============================================================
   SANTO TOMÁS MORO INSTITUTE — Design Tokens
   Fuente de verdad del sistema visual STMI
   ============================================================ */

:root {
  /* ── COLORES PRINCIPALES ────────────────────────────────── */
  --navy:         #0B2545;
  --navy-mid:     #163660;
  --navy-light:   #1E4D8C;
  --blue:         #2563EB;
  --blue-light:   #3B82F6;
  --teal:         #0891B2;
  --teal-light:   #06B6D4;
  --orange:       #EA580C;
  --orange-l:     #F97316;
  --purple:       #7C3AED;
  --purple-l:     #A78BFA;
  --green:        #059669;
  --green-l:      #34D399;
  --red:          #DC2626;
  --amber:        #D97706;
  --amber-l:      #FCD34D;

  /* ── COLORES POR ESCUELA ────────────────────────────────── */
  --school-business: #2563EB;
  --school-educ:     #0891B2;
  --school-gov:      #7C3AED;
  --school-tech:     #059669;

  /* ── NEUTRALES ─────────────────────────────────────────── */
  --white:    #FFFFFF;
  --bg:       #F4F8FF;
  --bg-alt:   #EEF3FF;
  --bg-dark:  #070F1E;
  --text:     #1E293B;
  --muted:    #64748B;
  --border:   #CBD5E1;
  --border-l: #E2E8F0;

  /* ── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* ── ESPACIADO ──────────────────────────────────────────── */
  --section-pad: 100px;
  --container:   1200px;

  /* ── FORMAS ─────────────────────────────────────────────── */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 60px rgba(0,0,0,.16);

  /* ── TRANSICIÓN ─────────────────────────────────────────── */
  --tr: .25s cubic-bezier(.4,0,.2,1);

  /* ── ALIASES de compatibilidad ──────────────────────────── */
  --color-navy:           var(--navy);
  --color-blue-primary:   var(--blue);
  --color-blue-dark:      var(--navy);
  --color-blue-light:     var(--blue-light);
  --color-teal:           var(--teal);
  --color-border:         var(--border);
  --color-border-l:       var(--border-l);
  --color-gray-50:        var(--bg);
  --color-gray-100:       var(--bg-alt);
  --color-text:           var(--text);
  --color-text-secondary: var(--muted);
  --color-neutral-500:    var(--muted);
  --color-white:          var(--white);
  --color-red-primary:    var(--red);
  --font-heading:         var(--font-head);
  --header-total:         70px;
}