/* ==========================================================================
   Luna Terra — Tokens de diseño
   Fuente rectora: Manual de Marca Luna Terra v3.1
   · Paleta y proporción .............. p.9
   · Contraste y accesibilidad ........ p.10
   · Sistema tipográfico .............. p.11
   · Tokens de diseño web ............. p.12
   No modificar valores sin actualizar el manual.
   ========================================================================== */

:root {
  /* ---- Paleta oficial (p.9) -------------------------------------------- */
  --lt-azul-noche: #0D1B2A;
  --lt-cobre: #B9684B;
  --lt-crema: #F5EFE6;
  --lt-borgona: #653747;
  --lt-arena: #CFC4B8;

  /* ---- Derivados ------------------------------------------------------- *
   * El manual (p.10) autoriza "grafito" para texto de párrafo sobre crema
   * pero no fija su código. Se deriva del azul noche desaturado.
   * Contraste sobre crema: 8,79:1 — aprobado para texto normal.            */
  --lt-grafito: #39434F;

  /* ---- Roles semánticos ------------------------------------------------ *
   * Superficies claras: crema domina (40% de la proporción del manual).    */
  --superficie: var(--lt-crema);
  --superficie-elevada: #FBF7F1;
  --superficie-hundida: #EFE7DB;
  --superficie-oscura: var(--lt-azul-noche);

  /* Texto sobre superficies claras — nunca cobre (3,57:1) */
  --texto: var(--lt-azul-noche);          /* 15,22:1 */
  --texto-suave: var(--lt-grafito);       /*  8,79:1 */
  --texto-enfasis: var(--lt-borgona);     /*  8,39:1 */

  /* Texto sobre superficies oscuras — nunca cobre (4,26:1, bajo AA normal) */
  --texto-inverso: var(--lt-crema);       /* 15,22:1 */
  --texto-inverso-suave: var(--lt-arena); /* 10,14:1 */

  /* Cobre: solo detalles, íconos, líneas y títulos ≥24px (p.10) */
  --acento-linea: var(--lt-cobre);

  /* ---- Bordes (p.12) --------------------------------------------------- */
  --borde: 1px solid rgba(13, 27, 42, 0.12);
  --borde-fuerte: 1px solid rgba(13, 27, 42, 0.22);
  --borde-inverso: 1px solid rgba(245, 239, 230, 0.18);

  /* ---- Radios (p.12) --------------------------------------------------- */
  --radio-boton: 6px;
  --radio-tarjeta: 12px;
  --radio-panel: 18px;

  /* ---- Sombras (p.12) — sutiles y profundas, nunca glow dorado --------- */
  --sombra: 0 12px 36px rgba(13, 27, 42, 0.14);
  --sombra-elevada: 0 18px 48px rgba(13, 27, 42, 0.18);

  /* ---- Espaciado (p.12) — unidad base 8 -------------------------------- */
  --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;

  /* ---- Anchos (p.12) --------------------------------------------------- */
  --ancho-max: 1200px;
  --ancho-lectura: 68ch;   /* dentro del rango 65–75 caracteres */
  --ancho-hero: 620px;     /* brief visual §02: ancho máximo del copy del hero */
  --alto-cabecera: 76px;

  /* ---- Tipografía (p.11) ----------------------------------------------- */
  --fuente-titulo: "DM Serif Display", Georgia, "Times New Roman", serif;
  --fuente-funcional: "Montserrat", Arial, Helvetica, sans-serif;

  --t-h1: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem);   /* 44 → 72 px */
  --t-h2: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);     /* 32 → 44 px */
  --t-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);/* 22 → 28 px */
  --t-cuerpo: clamp(1rem, 0.96rem + 0.16vw, 1.125rem); /* 16 → 18 px */
  --t-cuerpo-grande: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --t-etiqueta: 0.8125rem;                          /* 13 px */

  --lh-titulo: 1.0;   /* rango del manual: 0,95–1,05 */
  --lh-cuerpo: 1.6;   /* rango del manual: 1,5–1,7 */

  /* ---- Movimiento ------------------------------------------------------ *
   * Manual p.12: 150–220 ms en controles, 400–700 ms en revelados.
   * Brief visual §4: entradas entre 350 y 600 ms.
   * Se usa la intersección de ambos rangos: 400–600 ms.                    */
  --mov-control: 180ms;
  --mov-revelado: 480ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1); /* suave, sin rebote */

  /* ---- Foco (p.12) — anillo visible de 2px con separación de 2px ------- */
  --foco-color: var(--lt-borgona);
  --foco-color-inverso: var(--lt-arena);
}

/* El manual no define un modo oscuro. Se mantiene la paleta clara como
   única expresión de marca; las bandas oscuras son un recurso de
   composición, no un tema alternativo. */