/* ==========================================================================
   Conde Nails Academy — tokens
   Paleta del brandboard oficial + dos derivados (Caramelo Profundo, Tabaco).
   Contrastes WCAG 2.1 medidos el 16/09/2026.
   ========================================================================== */

:root {
  /* ---------- Color ---------- */
  --espresso: #271916;        /* oscuro dominante. Fondo de hero, precio y CTA final. Texto por defecto sobre claros. */
  --papel: #EFE5E3;           /* fondo claro principal. */
  --nude: #E8CEB7;            /* fondo secundario: separa bloques sin líneas. */
  --arena: #DEBA96;           /* bloques de acento, tarjetas de temario, badges. */
  --taupe: #C9B5AC;           /* bordes, estados apagados, tercer fondo. */
  --caramelo: #9D795F;        /* SÓLO gráfico. Nunca texto. */
  --caramelo-profundo: #7A5B45; /* texto de acento: cuerpo sólo sobre Papel (4,98). Sobre Nude/Arena, sólo ≥24px. */
  --tabaco: #B79784;          /* fondo del shooting. Empalma bloques con fotos. Texto encima: sólo Espresso. */
  --blanco: #FFFFFF;          /* texto sobre Espresso. */

  /* ---------- Tipografía ---------- */
  /* Sustituta de Rallisaguen Bold hasta confirmar licencia webfont. */
  --font-display: "Playfair Display", "Rallisaguen", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala mobile (base). Desktop sobreescribe abajo. Valores en px. */
  --fs-numero: 208px;   /* 19 USD, 7 días, 14 días */
  --fs-display: 52px;   /* titular de hero */
  --fs-h2: 38px;        /* titular de sección */
  --fs-h3: 28px;        /* título de tarjeta de temario, pregunta de precio */
  --fs-h4: 22px;        /* pregunta de FAQ, cita de testimonio */
  --fs-lead: 19px;      /* bajadas */
  --fs-body: 17px;      /* cuerpo */
  --fs-small: 15px;     /* metadatos, notas */
  --fs-eyebrow: 12px;   /* etiquetas cortas en mayúscula, nunca párrafos */

  --lh-numero: 0.82;
  --lh-display: 1.02;
  --lh-titulo: 1.12;
  --lh-body: 1.6;

  --tracking-display: -0.02em;
  --tracking-numero: -0.045em;
  --tracking-eyebrow: 0.16em;

  /* ---------- Spacing (base 4) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  --gutter: 16px;             /* margen lateral */
  --section-y: 96px;          /* aire vertical entre secciones */
  --max-ancho: 1240px;
  --max-texto: 640px;

  /* ---------- Radios ---------- */
  --r-0: 0;                   /* secciones, bloque de precio, fotos */
  --r-tarjeta: 4px;           /* testimonio, temario, FAQ */
  --r-pill: 999px;            /* botones y badges: eco del anillo del sello */
  --r-circulo: 50%;           /* avatares */

  /* ---------- Línea ---------- */
  --filete: 1px;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-corta: 200ms;
  --dur-reveal: 700ms;
  --reveal-y: 16px;
  --stagger: 80ms;
}

@media (min-width: 768px) {
  :root {
    --fs-numero: 280px;
    --fs-display: 80px;
    --fs-h2: 56px;
    --fs-h3: 34px;
    --fs-h4: 24px;
    --fs-lead: 21px;
    --fs-body: 18px;
    --gutter: 32px;
    --section-y: 144px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-numero: 400px;
    --fs-display: 104px;
    --fs-h2: 68px;
    --fs-h3: 36px;
    --gutter: 48px;
    --section-y: 192px;
  }
}