/* =====================================================================
   tokens.css — SISTEMA GLOBAL de design tokens y tipografía.
   Es la base de TODO el sistema. El ThemeManager de cada instituto
   sobreescribe (más abajo, inline) los tokens de color y de fuente.
   Aquí vive la ESCALA tipográfica global, espaciados, radios y resets.
   ===================================================================== */

:root {
  /* ── Color (fallbacks; el instituto los sobreescribe) ── */
  --color-primary: #185FA5;
  --color-primary-dark: #0C447C;
  --color-accent: #0F6E56;
  --color-bg: #F2F1EC;
  --color-surface: #FFFFFF;
  --color-text: #1D2127;
  --color-muted: #5C6470;
  --color-border: rgba(0,0,0,.08);
  --color-danger: #A32D2D;
  --color-danger-bg: #FCEBEB;

  /* ── Tipografía (familias; el instituto las sobreescribe) ── */
  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --weight-heading: 600;
  --weight-body: 400;

  /* ── Escala tipográfica GLOBAL (modular, factor --type-scale) ── */
  --type-scale: 1;
  --fs-xs:  calc(0.78rem * var(--type-scale));
  --fs-sm:  calc(0.88rem * var(--type-scale));
  --fs-base:calc(1.00rem * var(--type-scale));
  --fs-lg:  calc(1.15rem * var(--type-scale));
  --fs-xl:  calc(1.45rem * var(--type-scale));
  --fs-2xl: calc(1.85rem * var(--type-scale));
  --fs-3xl: calc(2.40rem * var(--type-scale));
  --lh-tight: 1.15;
  --lh-base: 1.6;

  /* ── Espaciado y formas ── */
  --radius: 12px;
  --space-1: .35rem; --space-2: .6rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem;
  --maxw: 1040px;
}

/* ── Reset mínimo ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { font-size: 100%; }

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--color-primary-dark); text-decoration: none; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
img { max-width: 100%; display: block; }