/**
 * tokens.css — fundaciones visuales.
 *
 * Paleta y tipografía del Scouting America Brand Guidelines 2024, páginas 14,
 * 15 y 16. **Solo la paleta Scouting America**: rojo, azul, tan, gris y blanco,
 * más sus derivados. Nada de dorado en la interfaz — es color de la sub-marca
 * Cub Scouts y solo aparece dentro del trademark, que no se altera.
 *
 * El manual arma sus páginas así, y esto lo replica:
 *   · página blanca con mucho aire
 *   · titular display en SERIF y en rojo Scouting America
 *   · texto en serif, gris cálido
 *   · micro-etiquetas (HEX:, RGB:) en sans BOLD CONDENSED
 *   · paneles Light Tan, reglas finas en Tan
 *   · fotografía real de chicos en actividad
 *
 * Contrastes medidos en docs/brand.md · script: scripts/contrast.py
 */

:root {
  /* ---- Primarios (pág. 14) ---- */
  --sa-red:   #CE1126;   /* PMS 186 · display y acento. NO crear tintes ni sombras. */
  --sa-blue:  #003F87;   /* PMS 294 · acción, enlaces, superficies de marca */
  --sa-tan:   #D6CEBD;   /* reglas, bordes, superficies cálidas */
  --sa-gray:  #515354;   /* texto */
  --sa-white: #FFFFFF;   /* el quinto color, según el manual */

  /* ---- Secundarios (pág. 15) ---- */
  --sa-pale-blue: #9AB3D5;
  --sa-dark-blue: #003366;
  --sa-light-tan: #E9E9E4;
  --sa-dark-tan:  #AD9D7B;
  --sa-pale-gray: #858787;
  --sa-dark-gray: #232528;

  /* ---- Roles ---- */
  --surface:        var(--sa-white);
  --canvas:         #F4F3EF;               /* lienzo cálido, no blanco quirúrgico */
  --surface-alt:    var(--sa-light-tan);
  --surface-warm:   var(--sa-tan);
  --surface-brand:  var(--sa-blue);
  --surface-accent: var(--sa-red);

  --text:           var(--sa-dark-gray);   /* 15.37:1 sobre blanco */
  --text-strong:    var(--sa-dark-gray);
  --text-muted:     var(--sa-gray);        /* 7.73:1 — el secundario TAMBIÉN pasa AA */
  --text-faint:     var(--sa-pale-gray);   /* 3.61:1 — solo decorativo, nunca texto */
  --text-display:   var(--sa-red);
  --text-subhead:   var(--sa-blue);
  --text-on-brand:  var(--sa-white);
  --text-on-accent: var(--sa-white);

  --rule:      var(--sa-tan);        /* la regla fina beige del manual */
  --rule-sa:   var(--sa-red);        /* regla vertical de acento */
  --border:    var(--sa-tan);
  --border-strong: var(--sa-dark-tan);

  --ink-veil:  rgb(255 255 255 / 0.18);  /* velo sobre superficies azules */
  /* Velos sobre fotografía. Existen para garantizar el contraste del texto
     encima de CUALQUIER zona de la imagen, no como efecto decorativo. */
  --scrim-top:    rgb(0 51 102 / 0.10);
  --scrim-mid:    rgb(0 51 102 / 0.72);
  --scrim-bottom: rgb(0 51 102 / 0.96);
  --scrim-tile-a: rgb(0 51 102 / 0.25);
  --scrim-tile-b: rgb(0 51 102 / 0.88);

  /* Auras: blooms suaves construidos con la paleta de marca. Son el fondo
     del producto, no un adorno — reemplazan a la fotografía en las zonas
     donde antes había recortes malos. */
  --aura-blue:  rgb(0 63 135 / 0.30);
  --aura-pale:  rgb(154 179 213 / 0.55);
  --aura-tan:   rgb(214 206 189 / 0.75);
  --aura-red:   rgb(206 17 38 / 0.14);
  --ok-green:  #1A6B3C;                  /* solo en la guía de estilos, para "pasa" */

  --focus-ring: var(--sa-blue);
  --focus-ring-on-brand: var(--sa-white);

  /* ---- Tipografía (pág. 16) ----
     Aprobadas: Times New Roman · Arial · Helvetica Neue LT Std 77 Bold
     Condensed · Proxima Nova (alterna de Google: Montserrat).
     El manual además permite: «additional fonts may be used as design elements,
     the foundation of any piece must be rooted in the fonts below».

     · display y prosa → SERIF. El manual está compuesto en un serif humanista;
       usamos Source Serif 4 (libre, muy cercano) con Times New Roman —aprobada—
       como respaldo real, no decorativo.
     · micro-etiquetas, botones y chrome → SANS BOLD CONDENSED, que es
       exactamente el rol que el manual le da a Helvetica Neue 77 Bold Condensed.
       En web: Roboto Condensed, con Arial Narrow y Arial detrás. */
  --font-display: "Source Serif 4", "Times New Roman", Times, Georgia, serif;
  --font-text: "Source Serif 4", "Times New Roman", Times, Georgia, serif;
  --font-ui: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;

  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* ---- Escala ---- */
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.05rem, 1rem + 0.22vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 3rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.8vw, 4.2rem);

  /* ---- Espacio y forma ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4.5rem;
  /* Radios generosos. La regla de "esquinas rectas" era una inferencia mía del
     manual impreso, no una regla del manual — y en pantalla lee anticuado. */
  --radius: 0.75rem;
  --radius-card: 1.5rem;
  --radius-pill: 999px;
  --tap-min: 44px;              /* área táctil mínima, WCAG 2.2 */
  --rule-w: 6px;                /* regla vertical de acento */
  --rule-hair: 1px;             /* la regla fina del manual */
  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 63ch;              /* medida de lectura en Documento */
  --measure-note: 46ch;         /* medida de anotación en Vitrina */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* entra: desacelera hasta su lugar */
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);    /* sale: acelera y se va */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* toggles de estado, simétrico */
  --dur-micro: 120ms;   /* press de botón, tick de checkbox */
  --dur-short: 160ms;   /* hover, cambios de estado de control */
  --dur-mid:   280ms;   /* acordeones, crossfades de contenido */
  --dur-long:  420ms;   /* entrada orquestada de página, diálogos */

  /* Sombra de papel (enmienda 17-ago-2026, ver design.md § Profundidad):
     corta, oscura, sin color. Solo en elementos interactivos claros que se
     levantan; nunca sobre superficie oscura ni sobre el logo. */
  --shadow-paper: 0 1px 2px rgb(0 51 102 / 0.07), 0 6px 16px rgb(0 51 102 / 0.08);
  --shadow-lift:  0 2px 4px rgb(0 51 102 / 0.08), 0 14px 30px rgb(0 51 102 / 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Titular display: serif, rojo, generoso. Es la firma de la marca. */
.display {
  font-family: var(--font-display);
  color: var(--text-display);
  font-weight: var(--fw-regular);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
}

/* Micro-etiqueta: el rol de la condensada bold en el manual (HEX:, RGB:). */
.subhead {
  font-family: var(--font-ui);
  color: var(--text-subhead);
  font-weight: var(--fw-bold);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--fw-medium); line-height: 1.15; }

/* La regla fina beige que el manual usa bajo cada nombre de color. */
.hairline { border: 0; border-top: 2px solid var(--rule); margin: var(--space-3) 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.on-brand { background: var(--surface-brand); color: var(--text-on-brand); }
.on-brand .display { color: var(--sa-white); }
.on-brand :where(a, button):focus-visible { outline-color: var(--focus-ring-on-brand); }
.on-warm { background: var(--surface-alt); }

.metric-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}