/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM F60 · Tokens
   Sistema de Matrículas — Liceo Artístico Armando Carrera González

   Única fuente de verdad para color, tipografía, espaciado, radios y sombras.
   No define ningún componente: sólo variables. Cargar siempre primero.

   La identidad se conserva: navy #123b5d y oro #ffd000 siguen siendo la marca.
   Lo que cambia es que ahora tienen escala, y que el oro es escaso: significa
   "estás aquí" y "esto requiere tu atención", nunca decoración.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Marca · navy institucional ── */
  --f60-navy-950:#081c2e;
  --f60-navy-900:#0c2941;
  --f60-navy-800:#123b5d;   /* color de marca histórico del sistema */
  --f60-navy-700:#1a4f79;
  --f60-navy-600:#246394;
  --f60-navy-100:#dbe8f4;
  --f60-navy-50:#eff5fb;

  /* ── Marca · oro institucional ── */
  --f60-oro-500:#ffd000;    /* color de marca histórico del sistema */
  --f60-oro-600:#e3b700;
  --f60-oro-700:#a16207;    /* única variante con contraste suficiente sobre claro */
  --f60-oro-100:#fff2c4;
  --f60-oro-50:#fffaeb;

  /* ── Neutros fríos, afinados hacia el navy ── */
  --f60-gris-0:#ffffff;
  --f60-gris-25:#fafbfd;
  --f60-gris-50:#f5f7fa;
  --f60-gris-100:#eef1f6;
  --f60-gris-200:#e1e7ef;
  --f60-gris-300:#cbd4e0;
  --f60-gris-400:#9aa8ba;
  --f60-gris-500:#6b7b8f;
  --f60-gris-600:#556478;
  --f60-gris-700:#3d4a5c;
  --f60-gris-900:#172033;

  /* ── Semánticos · un estado, un color, con su trío texto/fondo/borde ──
     ok       → NUEVO, activo, correcto
     peligro  → RETIRAR, retirado, destructivo
     atencion → REVISAR, pendiente
     neutro   → SIN CAMBIOS, no aplica
     info     → SIN ACCIÓN, informativo                                     */
  --f60-ok:#15803d;        --f60-ok-bg:#effaf3;        --f60-ok-bd:#b8e3c9;
  --f60-peligro:#b42318;   --f60-peligro-bg:#fef4f2;   --f60-peligro-bd:#f3c4bd;
  --f60-atencion:#b45309;  --f60-atencion-bg:#fff8ed;  --f60-atencion-bd:#f5d9ae;
  --f60-neutro:#52606f;    --f60-neutro-bg:#f1f4f8;    --f60-neutro-bd:#d7dfe9;
  --f60-info:#0e7490;      --f60-info-bg:#effbfd;      --f60-info-bd:#b6e3ee;

  /* ── Tipografía ──
     Interfaz: la cara nativa del sistema operativo (SF Pro en macOS,
     Segoe UI Variable en Windows). Es la más legible disponible, pesa 0 KB y
     no necesita internet — decisivo en una instalación local MAMP/XAMPP.
     Datos: monoespaciada tabular para RUN, fechas y códigos. No es estética:
     el trabajo diario es comparar dígitos entre CMDs, SIGE y el sistema, y en
     proporcional 21.550.204-1 y 21.550.240-1 parecen el mismo número.        */
  --f60-fuente:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
               Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --f60-fuente-dato:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --f60-t-display:30px;
  --f60-t-h1:22px;
  --f60-t-h2:17px;
  --f60-t-h3:15px;
  --f60-t-cuerpo:14.5px;
  --f60-t-sm:13px;
  --f60-t-xs:11.5px;

  /* ── Espaciado · escala de 4 ── */
  --f60-e1:4px;  --f60-e2:8px;  --f60-e3:12px; --f60-e4:16px; --f60-e5:20px;
  --f60-e6:24px; --f60-e8:32px; --f60-e10:40px; --f60-e12:48px;

  /* ── Radios ── */
  --f60-r-sm:6px;   /* control pequeño */
  --f60-r-md:8px;   /* botón, campo   */
  --f60-r-lg:12px;  /* tarjeta        */
  --f60-r-xl:16px;  /* modal          */
  --f60-r-full:999px;

  /* ── Sombras · tintadas de navy, nunca negro puro ── */
  --f60-s1:0 1px 2px rgba(12,41,65,.06), 0 1px 3px rgba(12,41,65,.05);
  --f60-s2:0 2px 4px rgba(12,41,65,.05), 0 4px 12px rgba(12,41,65,.07);
  --f60-s3:0 8px 16px rgba(12,41,65,.08), 0 20px 40px rgba(12,41,65,.12);
  --f60-anillo:0 0 0 3px rgba(255,208,0,.55);
  --f60-anillo-foco:0 0 0 3px rgba(36,99,148,.16);
}