/* ===========================================================================
   design-tokens.css — DIRECCIÓN CONGELADA (Fase 2)
   Raíces y Alas · Dirección C "Alegre didáctico"
   ---------------------------------------------------------------------------
   Baloo 2 (display redonda) + Nunito Sans (texto). Paleta de marca al frente
   con disciplina: NARANJA = acción primaria; VERDE/AMARILLO/TEAL = bloques,
   categorías y temas de sección (fills grandes, no texto chico). Todo color/
   fuente vive acá; las pantallas solo leen var(--…).
   =========================================================================== */

:root {
  /* --- Tipografía (nombres exactos de Google Fonts) ------------------------- */
  --font-display: 'Baloo 2';        /* headlines, precios, números */
  --font-body:    'Nunito Sans';    /* texto corrido, UI */
  --font-mono:    'JetBrains Mono'; /* labels técnicos puntuales (uso mínimo) */

  /* --- Capas de fondo (de base a hundido) ----------------------------------- */
  --bg:      #FFFDF8;   /* marfil cálido, fondo principal */
  --bg-elev: #FFFFFF;   /* cards, header */
  --bg-sunk: #FBF6EA;   /* zonas suaves hundidas */
  --bg-deep: #F1E9D6;   /* tracks, fondos profundos */

  /* --- Tinta ---------------------------------------------------------------- */
  --ink:       #2A2E22;  /* texto principal (~13:1 sobre bg) */
  --ink-soft:  #5A6152;  /* texto secundario (~5.6:1) */
  --ink-faint: #8C9280;  /* labels grandes, disabled */

  /* --- Estructura ----------------------------------------------------------- */
  --line:        #ECE7DA;
  --line-strong: #DAD3C2;
  --radius:      16px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* --- Acento primario (UNO para acciones): naranja de marca --------------- */
  --accent:      #FB6107;  /* botones primarios, precios, énfasis de acción */
  --accent-soft: #FFE7D4;  /* fondos tinted */
  --accent-deep: #C8490A;  /* hover/active, texto naranja sobre soft */

  /* --- Colores de marca (bloques, categorías, temas de sección) ------------- */
  /* Se usan como FILLS grandes y chips; para texto usar las variantes -deep.  */
  --brand-green:      #99C24D;  --brand-green-deep: #4F7A2B;  --brand-green-soft: #EAF3D9;
  --brand-yellow:     #FFC914;  --brand-yellow-deep:#8A6D00;  --brand-yellow-soft:#FFF3CC;
  --brand-teal:       #048BA8;  --brand-teal-deep:  #036B82;  --brand-teal-soft:  #D9EEF3;

  /* --- Estados (cada uno con -soft) ----------------------------------------- */
  --ok:     #4F9D3A;  --ok-soft:     #E4F1DA;
  --warn:   #E6A80C;  --warn-soft:   #FCEFC7;
  --danger: #D64525;  --danger-soft: #FBE1D9;
  --info:   #048BA8;  --info-soft:   #D9EEF3;

  /* --- Colores de persona (avatares) — estables por persona en todo el set - */
  --person-1: #99C24D;  --person-2: #048BA8;  --person-3: #E6A80C;
  --person-4: #7A9E3A;  --person-5: #C4551F;  --person-6: #5AA6BC;

  /* --- Texto sobre fills de color (para contraste correcto) ---------------- */
  --on-accent:     #FFFFFF;   /* texto/íconos sobre naranja/teal/verde fuerte */
  --ink-on-green:  #223D09;   /* texto oscuro sobre verde de marca */
  --ink-on-yellow: #5A4600;   /* texto oscuro sobre amarillo de marca */

  /* --- Pie de página (tema oscuro) ----------------------------------------- */
  --footer-ink:        #C5C8B8;
  --footer-ink-soft:   #9A9E8C;
  --footer-line:       #3A3F31;
  --footer-field:      #22261C;
  --footer-placeholder:#8B9079;

  /* Sombra de marca (cálida, no gris Material) */
  --shadow: 0 18px 40px -22px rgba(42, 46, 34, .38);
  --shadow-sm: 0 8px 20px -12px rgba(42, 46, 34, .32);
}

/* Motivo / densidad:
   - Densidad media-aireada: padding base 20–28px, secciones 64–88px.
   - Bordes 1.5–2px, radios generosos (16/28), esquinas suaves = amabilidad.
   - Color-blocking: como mucho ~1 bloque de acento fuerte por pantalla visible;
     verde/amarillo/teal reparten el resto para no saturar (acento naranja ≤10% área).
   - Formas: puntos/blobs decorativos escasos y con intención (eco del logo de manitas).
   - Sin emojis: íconos = SVG inline lucide-style (stroke:currentColor). */