/* =====================================================================
   MAKKI — Tokens de diseño (seccion 9 de la hoja de ruta).
   Minimalista, PLANO: sin sombras, sin degradados, sin bordes redondeados.
   Todo flota sobre negro absoluto.

   NOTA DE ACCESIBILIDAD (seccion 16):
   crema sobre el terracota de marca (#D9481F) da 3.78:1 — vale para titulares
   grandes pero NO cumple WCAG AA en texto pequeno. Por eso hay dos tonos de la
   misma familia:
     --acento       #D9481F  color de marca: rellenos, filetes, titulares grandes
     --acento-prof  #B23A14  bloques que llevan texto pequeno en crema (5.30:1)
   Y sobre el terracota de marca, el texto pequeno va en negro (4.91:1).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* --- Paleta --- */
  --negro:        #000000;
  --negro-elev:   #0c0c0c;   /* separacion de planos sin usar sombras */
  --negro-filete: #242220;
  --crema:        #F4EFE6;
  --crema-apag:   #A9A49C;   /* metadatos sobre negro, 7.2:1 */
  --acento:       #D9481F;
  --acento-prof:  #B23A14;
  --acento-apag:  #7A2810;

  /* Estados de validacion: dos niveles, seccion 8.
     Ambar = advertencia suave (no bloquea). Rojo/terracota = alerta dura (bloquea). */
  --ambar:        #E8A33D;
  --ambar-prof:   #8A5F14;
  --valido:       #3FA46A;
  --valido-prof:  #1C5233;

  /* Controles inactivos (desactivados o bloqueados). Colores propios en vez de
     opacidad: una opacidad sobre terracota con texto crema bajaba de 2:1.
     --inactivo-texto sobre negro da 4.74:1 y se distingue de --crema-apag (7.2:1). */
  --inactivo-texto:  #7D776F;
  --inactivo-filete: #3A3632;

  /* --- Tipografia --- */
  --f-display: "Anton", "Archivo Narrow", "Arial Narrow", Impact, "Haettenschweiler", sans-serif;
  --f-cond:    "Barlow Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
  --f-cuerpo:  "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Escala tipografica fluida, mobile-first */
  --t-cartel: clamp(2.4rem, 13vw, 6rem);
  --t-xxl:    clamp(1.9rem, 8vw, 3.4rem);
  --t-xl:     clamp(1.45rem, 5.5vw, 2.2rem);
  --t-l:      clamp(1.15rem, 4vw, 1.5rem);
  --t-m:      1rem;
  --t-s:      0.9rem;
  --t-xs:     0.8rem;
  --t-meta:   0.68rem;

  --ls-meta:  0.22em;   /* etiqueta tecnica: MOD. 2 / ESCENA 14 */
  --ls-cartel: -0.015em;

  /* --- Retícula y espacio --- */
  --e-0: 0;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  --gutter: 16px;          /* margen lateral minimo en cualquier ancho */
  --ancho-max: 1320px;
  --ancho-lectura: 62ch;

  --filete: 2px;           /* los cortes son limpios y rectos */
  --filete-grueso: 4px;

  --alto-toque: 48px;      /* seccion 12: todo alcanzable con un solo dedo */

  --trans: 120ms linear;   /* transiciones cortas; nada de animacion decorativa */
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 48px; }
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  :root { --trans: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
}