/* =====================================================================
   Docokids brand design tokens.

   Lifted from the visual-direction mockup (home-v5.4.html). These are the
   shared brand variables -- colors, type scale, spacing. Page templates and
   components.css reference them via var(--token-name). Keep this file as the
   single source of truth for brand values.

   Roles de la paleta:
     La paleta FUNCIONAL de UI es teal (--p-verde) + rosado (--p-rosado). El
     azul, la lima, el naranja y el morado son colores que SOLO viven en el logo
     (wordmark): NO usar como accent de UI.
     - verde/teal  #18b3af (--p-verde) → color primario de marca/acción = el teal
                   del logo. Se usa en botones, texto de acción y rellenos.
                   Nota: texto blanco sobre el teal queda en ~2.6:1 (debajo de
                   WCAG AA) — decisión de marca aceptada (vibración de marca >
                   contraste estricto).
     - rosado      #ed5482 (--p-rosado) → accent funcional de UI.
     - azul cielo  #68cbef (--p-azul) → color del logo; NO usar como accent de UI.
     - lima        #aed552 (--p-lima) → color del logo; NO usar como accent de UI.
     - naranja     #f2964d (--p-naranja) → color del logo; NO usar como accent de UI.
   --p-morado NO está en el logo: es una extensión, evitar por defecto.
   ===================================================================== */
:root {
  /* 1. Color tokens — real Docokids brand */
  --gris-oscuro: #1a1a1a;
  --gris-secundario: #3d434f;
  --gris: #666666;
  --hairline: #c8ccd4;
  --gris-claro: #f5f5f5;
  --paper: #ffffff;
  --paper-pure: #ffffff;
  --p-verde: #18b3af;               /* color primario de marca/acción = el teal del logo */
  --p-verde-hover: #149e9a;         /* estado hover: un teal brillante un poco más oscuro */
  --p-azul: #68cbef;                /* color del logo (wordmark); NO usar como accent de UI. La paleta funcional es teal (--p-verde) + rosado (--p-rosado) */
  --p-lima: #aed552;                /* color del logo (wordmark); NO usar como accent de UI. La paleta funcional es teal (--p-verde) + rosado (--p-rosado) */
  --p-morado: #7566db;              /* no está en el logo — extensión, evitar por defecto */
  --p-morado-hover: #6254c4;        /* no está en el logo — extensión, evitar por defecto */
  --p-naranja: #f2964d;
  --p-rosado: #ed5482;

  /* 2. Typography — sizes */
  --fs-display: 4.209rem;
  --fs-h1: 3.157rem;
  --fs-h2: 2.369rem;
  --fs-h3: 1.777rem;
  --fs-lead: 1.333rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-eyebrow: var(--fs-small); /* el eyebrow monta el escalón small (14px): piso legible para caps con tracking; a 1rem competiría con el body. Alias explícito: si small se recalibra, el eyebrow lo sigue (no divergen en silencio). */

  /* 2. Typography — families (Poppins single family, la fuente de los decks) */
  --font-serif: "Poppins", system-ui, -apple-system, sans-serif;
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;

  /* 3. Spacing scale (root 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* 4. Layout */
  --measure-prose: 65ch;
  --measure-content: 1140px;
  --measure-narrow: 720px;
}