/* ═══════════════════════════════════════════════════════
   ASPA — Design Tokens
   Fuente: Manual de Marca v4.0 · sección 14
   No modificar valores sin actualizar el manual.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── ASPA Azul — rampa institucional ── */
  --aspa-b-50:  #EEF2F6;
  --aspa-b-100: #D6E0EA;
  --aspa-b-200: #A9BED2;
  --aspa-b-300: #7896B4;
  --aspa-b-400: #476A8E;
  --aspa-b-500: #2C4E70;
  --aspa-b-600: #1E3F5E;
  --aspa-b-700: #153453;  /* marca */
  --aspa-b-800: #0F273F;
  --aspa-b-900: #091A2B;

  /* ── ASPA Carmín — rampa de acento ── */
  --aspa-c-50:  #FCECF0;
  --aspa-c-100: #F8CFD8;
  --aspa-c-200: #F1A3B4;
  --aspa-c-300: #E97890;
  --aspa-c-400: #E1516F;
  --aspa-c-500: #D93A5A;  /* marca */
  --aspa-c-600: #BC2C49;
  --aspa-c-700: #97213A;
  --aspa-c-800: #71182B;
  --aspa-c-900: #4C101D;

  /* ── Neutros slate ── */
  --aspa-n-0:   #FFFFFF;
  --aspa-n-50:  #F7F8FA;
  --aspa-n-100: #EDEFF2;
  --aspa-n-150: #E4E7EC;
  --aspa-n-200: #DCE0E6;
  --aspa-n-300: #C4CAD3;
  --aspa-n-400: #9AA3B0;
  --aspa-n-500: #78828F;
  --aspa-n-600: #545E6B;
  --aspa-n-700: #3D4651;
  --aspa-n-800: #2A313A;
  --aspa-n-900: #1A1F26;

  /* ── Funcionales — distintos del carmín de marca ── */
  --aspa-ok:   #1B7A4B;  --aspa-ok-bg:   #E6F4EC;
  --aspa-warn: #B9770F;  --aspa-warn-bg: #FBF0DD;
  --aspa-err:  #B02525;  --aspa-err-bg:  #F9E7E7;

  /* ── Roles semánticos ── */
  --aspa-bg-page:      var(--aspa-n-0);
  --aspa-bg-strong:    var(--aspa-b-700);
  --aspa-bg-accent:    var(--aspa-b-50);
  --aspa-bg-subtle:    var(--aspa-n-50);
  --aspa-text-primary: var(--aspa-n-900);
  --aspa-text-body:    var(--aspa-n-800);
  --aspa-text-muted:   var(--aspa-n-600);
  --aspa-text-faint:   var(--aspa-n-500);
  --aspa-text-active:  var(--aspa-b-600);
  --aspa-line:         var(--aspa-n-200);
  --aspa-line-soft:    var(--aspa-n-150);
  --aspa-btn-primary:  var(--aspa-b-700);
  --aspa-btn-cta:      var(--aspa-c-500);

  /* ── Tipografía ── */
  --aspa-font-serif: 'Fraunces', Georgia, serif;
  --aspa-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --aspa-font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --aspa-fs-display: 46px;
  --aspa-fs-h1:      34px;
  --aspa-fs-h2:      22px;
  --aspa-fs-h3:      16px;
  --aspa-fs-body:    15px;
  --aspa-fs-label:   11px;
  --aspa-fs-mono:    13px;
  --aspa-lh-body:    1.62;

  /* ── Espaciado · base 8px ── */
  --aspa-sp-1:  4px;
  --aspa-sp-2:  8px;
  --aspa-sp-3:  12px;
  --aspa-sp-4:  16px;
  --aspa-sp-6:  24px;
  --aspa-sp-8:  32px;
  --aspa-sp-10: 40px;
  --aspa-sp-16: 64px;
  --aspa-sp-24: 96px;

  /* ── Radios ── */
  --aspa-r-sm:   4px;   /* chips */
  --aspa-r-md:   8px;   /* botones / inputs */
  --aspa-r-lg:   12px;  /* tarjetas */
  --aspa-r-xl:   16px;  /* paneles */
  --aspa-r-pill: 100px; /* badges */

  /* ── Sombras · tintadas con Azul 900 ── */
  --aspa-sh-sm: 0 1px 3px rgba(9, 26, 43, .06);
  --aspa-sh-md: 0 4px 12px rgba(9, 26, 43, .08);
  --aspa-sh-lg: 0 8px 24px rgba(9, 26, 43, .10);

  /* ── Retícula ── */
  --aspa-maxw:      1280px;
  --aspa-maxw-text: 720px;
  --aspa-gutter:    24px;
  --aspa-margin:    80px;
  --aspa-margin-sm: 20px;

  --aspa-ease: cubic-bezier(.22, .61, .36, 1);
}