/* ==========================================================================
   Personitas del Milenio — Design System
   tokens.css · Fuente de verdad en CSS (derivada de tokens/tokens.json)
   Fases 1–8 — Design System completo · v1.0.0
   Tipografía: Fredoka (H1–H4) + Nunito (H5–H6, cuerpo, botones)
   ========================================================================== */

:root {
  /* =====================================================================
     COLOR · Paleta de marca
     ===================================================================== */
  --color-navy:       #203860; /* Texto principal / botón primario */
  --color-tomato:     #E84924; /* Acento (ilustración, íconos deco, texto grande) */
  --color-tomato-strong: #C2381A; /* Acento oscurecido para texto pequeño AA */
  --color-canary:     #F9B000; /* Secundario */
  --color-sky:        #0DB1CA; /* Primary */
  --color-lime:       #8AC75A;
  --color-flamingo:   #F08FBA;
  --color-periwinkle: #BDB8DD;

  /* =====================================================================
     COLOR · Escala neutra (tinte Navy)
     ===================================================================== */
  --color-gray-100: #F8F9FA;
  --color-gray-200: #EEF1F4;
  --color-gray-300: #DDE3E9;
  --color-gray-400: #C3CCD6;
  --color-gray-500: #9AA7B4;
  --color-gray-600: #6E7C8C;
  --color-gray-700: #4A5866;
  --color-gray-800: #2E3B4D;
  --color-gray-900: #1A2436;

  /* =====================================================================
     COLOR · Roles semánticos
     ===================================================================== */
  --color-bg:             var(--color-gray-100);
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;

  --color-text-primary:   var(--color-navy);      /* AA 11.69:1 sobre blanco */
  --color-text-secondary: var(--color-gray-700);  /* AA 6.92:1 sobre gray-100 */
  --color-text-inverse:   #FFFFFF;
  --color-text:           var(--color-navy);

  --color-border:         var(--color-gray-300);
  --color-border-strong:  var(--color-gray-400);
  --color-focus-ring:     var(--color-navy);      /* SC 2.4.11: 11.69:1 sobre blanco */

  --color-primary:   var(--color-sky);
  --color-secondary: var(--color-canary);
  --color-accent:    var(--color-tomato);
  --color-accent-strong: var(--color-tomato-strong); /* texto pequeño AA */

  /* --- Aliases DEPRECATED (compatibilidad Fase 1) ----------------------- */
  --color-text-muted:  var(--color-text-secondary); /* DEPRECATED */
  --color-heading:     var(--color-text-primary);   /* DEPRECATED */
  --color-border-soft: var(--color-border);         /* DEPRECATED */

  /* =====================================================================
     TIPOGRAFÍA · Familias
     ===================================================================== */
  --font-display:   "Fredoka", "Trebuchet MS", system-ui, sans-serif; /* H1–H4 */
  --font-body:      "Nunito", system-ui, -apple-system, sans-serif;   /* H5–H6, cuerpo, botones */
  --font-mono:      ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Familias de la comparativa de Fase 1 (se mantienen) */
  --font-display-a: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body-a:    "Nunito", system-ui, -apple-system, sans-serif;
  --font-display-b: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body-b:    "Figtree", system-ui, -apple-system, sans-serif;

  /* =====================================================================
     TIPOGRAFÍA · Pesos
     ===================================================================== */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* =====================================================================
     TIPOGRAFÍA · Escala modular (ratio 1.250 · base 16px)
     ===================================================================== */
  --font-size-h1:      3.052rem;  /* 48.83px */
  --font-size-h2:      2.441rem;  /* 39.06px */
  --font-size-h3:      1.953rem;  /* 31.25px */
  --font-size-h4:      1.563rem;  /* 25.00px */
  --font-size-h5:      1.25rem;   /* 20.00px */
  --font-size-h6:      1rem;      /* 16.00px */
  --font-size-lead:    1.25rem;
  --font-size-body:    1rem;      /* 16.00px */
  --font-size-small:   0.8rem;    /* 12.80px */
  --font-size-caption: 0.64rem;   /* 10.24px */

  --line-tight:  1.1;
  --line-snug:   1.25;
  --line-normal: 1.5;
  --line-loose:  1.7;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.08em;

  /* =====================================================================
     ESPACIADO · escala 4px → 96px
     ===================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* =====================================================================
     RADIOS
     ===================================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* =====================================================================
     SOMBRAS · rgba Navy suave
     ===================================================================== */
  --shadow-sm: 0 1px 2px rgba(32, 56, 96, 0.06);
  --shadow-md: 0 4px 12px rgba(32, 56, 96, 0.10);
  --shadow-lg: 0 12px 32px rgba(32, 56, 96, 0.14);

  /* =====================================================================
     MARCA · Logo
     ===================================================================== */
  --brand-logo-min-width:  120px;  /* digital */
  --brand-logo-min-height: 62px;
  --brand-clear-space:     0.5;    /* × altura del monograma */
  --brand-logo-ratio:      1.95;

  /* =====================================================================
     ICONOGRAFÍA · Phosphor Fill
     ===================================================================== */
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;

  /* =====================================================================
     CONTROLES · botones, inputs y anillo de foco
     ===================================================================== */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --control-target-min: 24px;   /* target táctil mínimo (Fitts) */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* =====================================================================
     BREAKPOINTS (documentados; el CSS usa media queries nativas)
     ===================================================================== */
  --bp-sm: 640px;
  --bp-md: 768px;   /* activa las columnas del grid */
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* =====================================================================
     LAYOUT · contenedores y grid
     ===================================================================== */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-wide:   1440px;
  --container-gutter: var(--space-4);
  --grid-columns:     12;
  --grid-gap:         var(--space-6);

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --layout-max:    1120px;
  --layout-gutter: var(--space-6);
  --header-height: 72px;
}