/*
 * RewardOdds — sistema "Ledger" (v2).
 * Paleta fría slate/índigo validada por contraste WCAG antes de su uso.
 * Escala de espaciado base-8.
 * Radios y sombras mínimos: la jerarquía se construye con borde y tipografía,
 * no con superficies flotantes.
 */
:root {
  /* ---- Superficies ---- */
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --superficie-alt: #eaeef2;

  /* ---- Texto ---- */
  --tinta: #10151c;
  --tinta-media: #3f4a58;
  --tinta-invertida: #f4f6f8;

  /* ---- Líneas ---- */
  --linea: #7c8896;
  --linea-sutil: #d8dee5;

  /* ---- Acento primario: índigo ---- */
  --indigo: #2544c4;
  --indigo-oscuro: #1a318f;
  --indigo-tenue: #e3e8fb;

  /* ---- Acento secundario: verde azulado ---- */
  --teal: #0b6b57;
  --teal-tenue: #d8f0ea;

  /* ---- Estados ---- */
  --ambar-fg: #7a4a00;
  --ambar-bg: #fbe8bf;
  --rojo-fg: #a3241c;
  --rojo-bg: #fbdad7;
  --verde-fg: #0b6b57;
  --verde-bg: #d8f0ea;

  /* ---- Panel oscuro (cabecera utilitaria / pie) ---- */
  --marino-950: #0a0f18;
  --marino-800: #16202f;
  --marino-200: #dbe1e8;
  --marino-400: #9aa6b4;
  --indigo-claro: #8fa4f7;

  /* ---- Tipografía: una sola familia, jerarquía por peso ---- */
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;

  --tipo-100: 0.75rem;
  --tipo-200: 0.8125rem;
  --tipo-300: 0.9375rem;
  --tipo-400: 1rem;
  --tipo-500: 1.125rem;
  --tipo-600: 1.375rem;
  --tipo-700: 1.75rem;
  --tipo-800: clamp(2.1rem, 1.7rem + 1.8vw, 2.75rem);
  --tipo-900: clamp(2.6rem, 2rem + 2.8vw, 3.75rem);

  --interlineado-texto: 1.5;
  --interlineado-ajustado: 1.15;
  --tracking-eyebrow: 0.08em;

  /* ---- Espaciado: base 8 ---- */
  --e-1: 0.5rem;
  --e-2: 0.75rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2rem;
  --e-6: 3rem;
  --e-7: 4rem;
  --e-8: 6rem;
  --e-9: 8rem;

  /* ---- Radio / borde / sombra: mínimos, planos ---- */
  --radio: 4px;
  --radio-sm: 2px;
  --borde: 1.5px;
  --borde-fuerte: 2px;
  --sombra-cabecera: 0 1px 0 rgba(16, 21, 28, 0.08);

  /* Alto real de la barra utilitaria + cabecera principal (medido), usado
     por el héroe para calcular cuánto alto de viewport le queda disponible. */
  --alto-cabecera: 108px;

  /* ---- Contenedores ---- */
  --ancho-max: 1240px;
  --ancho-lectura: 44rem;

  --punto-sm: 480px;
  --punto-md: 768px;
  --punto-lg: 1040px;
  --punto-xl: 1280px;

  /* ---- Movimiento: sutil, sin traslados ---- */
  --dur: 150ms;
  --easing: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}