/* =========================================================================
   Escultoriam — tokens
   Única fuente de verdad para color, tipografía, ritmo y movimiento.
   Breakpoints del proyecto: 480 / 768 / 1024 / 1440 (mobile-first, min-width)
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- paleta de marca (no tocar) --- */
  --leonhart-blue: #102e55;
  --leonhart-burgundy: #6c1722;
  --leonhart-gold: #c99a45;
  --parchment: #e7cfa4;
  --charcoal: #171311;

  /* --- derivados --- */
  --blue-900: #061020;
  --blue-800: #09182c;
  --blue-700: #0c2340;
  --blue-600: var(--leonhart-blue);
  --blue-400: #26507f;

  --burgundy-700: #4d0f18;
  --burgundy-600: var(--leonhart-burgundy);
  --burgundy-500: #8a2131;

  --gold-600: #8c6828;
  --gold-500: var(--leonhart-gold);
  --gold-300: #ddb672;
  --gold-200: #e8c98e;

  --parchment-100: #f4e8ce;
  --ink: #241a12;

  /* --- mazos del juego ---
     Color muestreado de las cartas reales del instructivo. Se usan para
     identificar cada mazo o fase, y muy diluidos como tinte de fondo de la
     sección que trata de ellos (`--veil` en layout.css). Nunca como color de
     superficie plena. */
  --deck-oraculo: #0e4d4d;
  --deck-oraculo-lit: #35a3a3;
  --deck-hechizos: #290467;
  --deck-hechizos-lit: #8a5fe0;
  --deck-conclave: #e74707;
  --deck-conclave-lit: #f2762f;
  --deck-juicio: #1a2774;
  --deck-juicio-lit: #4a6fd8;

  /* --- superficies --- */
  --bg: var(--blue-900);
  --bg-raised: var(--blue-800);
  --surface-noble: linear-gradient(160deg, #12304f 0%, #0b1d34 62%, #081625 100%);
  --surface-intrigue: linear-gradient(160deg, #52121c 0%, #2c0c12 70%, #1a0a0d 100%);
  --surface-parchment: linear-gradient(165deg, #f6ecd6 0%, #e7cfa4 100%);

  /* --- texto --- */
  --text: var(--parchment-100);
  --text-dim: rgb(244 232 206 / 0.74);
  --text-mute: rgb(244 232 206 / 0.54);
  --text-on-parchment: var(--ink);

  /* --- líneas y ornamento --- */
  --rule: rgb(201 154 69 / 0.26);
  --rule-strong: rgb(201 154 69 / 0.55);
  --hairline: 1px solid var(--rule);
  --radius: 2px;
  --radius-lg: 3px;

  /* --- barra de desplazamiento ---
     El canal es piedra azul, un tono por encima del fondo para que se lea sin
     encender una franja; el pulgar es latón envejecido y solo se aclara al
     agarrarlo. Ver `base.css`. */
  --scroll-w: 10px;
  --scroll-track: #081627;

  /* --- sombras (nunca negro puro) --- */
  --shadow-panel: 0 20px 48px -26px rgb(3 9 18 / 0.9);
  --shadow-raised: 0 10px 24px -14px rgb(3 9 18 / 0.85);
  --glow-gold: 0 0 0 1px rgb(201 154 69 / 0.5), 0 6px 20px -10px rgb(201 154 69 / 0.45);

  /* --- tipografía ---
     Detrás de cada familia van sus respaldos calibrados (`fonts.css`), que
     ocupan el mismo alto que ella: mientras la fuente real llega, el texto se
     compone con el tipo del sistema pero la página mide lo mismo, así que
     nada se mueve cuando entra. El orden es el de las tipografías que se van
     a encontrar de verdad —Palatino, Noto Serif de Android, Times— y detrás
     quedan las de siempre, sin calibrar, por si el navegador no entiende las
     descripciones. */
  --font-display: "Grenze", "Grenze respaldo", "Grenze respaldo Android", "Grenze respaldo Times",
    "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Cardo", "Cardo respaldo", "Cardo respaldo Android", "Cardo respaldo Times",
    "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-lede: clamp(1.125rem, 1.02rem + 0.6vw, 1.4375rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2.4vw, 3.15rem);
  --fs-tagline: clamp(1.75rem, 1.2rem + 2.6vw, 3.1rem);
  --fs-numeral: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.66;
  --tracking-label: 0.22em;
  --tracking-display: 0.012em;

  --measure: 60ch;

  /* --- ritmo --- */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --container: 78rem;
  /* Con secciones de una pantalla, el aire vertical lo da el centrado: el
     relleno solo tiene que separar del borde. */
  --section-y: clamp(1.5rem, 3svh, 3rem);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 5rem;

  --nav-h: 4rem;

  /* --- movimiento --- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
  --dur-scene: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sway: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- PERILLA DE LA ENTRADA DEL HERO ---
     Multiplica de una vez la duración Y el desfase de todas las capas y del
     texto: 1 = ritmo original, 1.25 = un 25 % más lento, 0.8 = más rápido.
     Es el único sitio donde se ajusta el ritmo de la escena al montarse. */
  --enter-scale: 1.5625;
}

@media (min-width: 768px) {
  :root {
    --nav-h: 5rem;
  }
}