/* ════════════════════════════════════════════════════════════════════════
   SALMA AKELE — PSICOTERAPEUTA — tokens.css
   ────────────────────────────────────────────────────────────────────────
   ÚNICO lugar donde vive la IDENTIDAD VISUAL: colores, tipografía, escala,
   espaciados, radios, sombras, transiciones y medidas de layout.

   REGLA: el resto del CSS solo CONSUME estas variables con var(--...).
   Nunca escribir un color "a mano" en los demás archivos.

   IDENTIDAD VISUAL (rediseño estilo Pakmail, 2026-07-01):
   · Paleta de MAGENTAS PASTEL suaves (nada agresivo). Ref: paleta "rosa rubor".
   · Tipografía ROBOTO (como Pakmail), tanto en títulos como en cuerpo.
   · Esquinas REDONDEADAS suaves y sombras sutiles (estilo Pakmail).
   · Botones tipo PÍLDORA. Bandas alternadas blanco / ciruela oscuro.

   Este archivo se carga ANTES que base.css en cada HTML.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color base ──
     Se conservan los NOMBRES de variable heredados para no romper referencias. */
  --c-white:      #FFFFFF;
  --c-cream:      #FCFCFC;   /* fondo principal: casi blanco, distinto de las tarjetas blancas */
  --c-ice:        #F7EEF3;   /* rosa muy claro (fondos de sección alternos) */
  --c-sand:       #FBF5F8;   /* rosa casi blanco (alterno más suave) */
  --c-border:     #EAD9E2;   /* borde malva muy suave */
  --c-text:       #2E2530;   /* texto principal (ciruela casi negro) */
  --c-text-soft:  #6B5560;   /* texto secundario (malva grisáceo) */
  --c-heading:    #3A2B36;   /* títulos (ciruela oscuro) */
  --c-graphite:   #F7EEF3;   /* reusa rosa claro para no romper refs viejas */

  /* ── Marca principal: MAGENTA PASTEL ──
     --c-terra es el acento; --c-terra-dark el hover/énfasis. */
  --c-terra:        #C9A0B4;   /* magenta pastel (acentos, iconos, títulos card) */
  --c-terra-soft:   #E7CEDA;   /* magenta pastel claro */
  --c-terra-dark:   #B98BA5;   /* magenta pastel con énfasis */

  /* ── Ciruela oscuro: bandas oscuras y footer (como el vino de Pakmail) ── */
  --c-plum:         #B8A7BE;
  --c-plum-dark:    #4A2C3F;

  /* Alias del color de marca para no romper referencias heredadas. */
  --c-sage:         #C9A0B4;
  --c-sage-dark:    #B98BA5;
  --c-gold:         #C9A0B4;
  --c-gold-soft:    #E7CEDA;
  --c-peach:        #C9A0B4;
  --c-peach-dark:   #B98BA5;

  /* ── Color de marca de WhatsApp (verde oficial) ── */
  --c-wa:        #25D366;
  --c-wa-dark:   #1FB957;

  /* ── Verde salvia (botones flotantes: subir y WhatsApp) ── */
  --c-mint:      #6E9C7C;
  --c-mint-dark: #567E62;

  /* ── Tipografía ──
     Roboto en todo (como Pakmail): títulos, subtítulos, cuerpo, nav y botones. */
  --font-display:  "Roboto", system-ui, -apple-system, sans-serif;  /* títulos (h1, h2) */
  --font-subtitle: "Roboto", system-ui, -apple-system, sans-serif;  /* subtítulos (h3, h4) */
  --font-body:     "Roboto", system-ui, -apple-system, sans-serif;  /* cuerpo de texto */
  --font-nav:      "Roboto", system-ui, -apple-system, sans-serif;  /* menú / navegación */
  --font-button:   "Roboto", system-ui, -apple-system, sans-serif;  /* botones */

  /* ── Escala tipográfica ── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.5rem;
  --fs-5xl:  4.5rem;

  /* ── Espaciado ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;
  --sp-16: 10rem;

  /* ── Radios ──
     Esquinas REDONDEADAS suaves (estilo Pakmail). Botones tipo píldora. */
  --r-sm:   6px;
  --r-md:   10px;    /* cards y contenedores */
  --r-lg:   16px;    /* imágenes grandes, paneles */
  --r-xl:   22px;
  --r-pill: 999px;   /* chips / badges píldora */
  --r-btn:  999px;   /* botones de acción: PÍLDORA */
  --r-round: 50%;    /* elementos circulares (flotantes) */
  --r-toggle: 999px; /* toggle de idioma: píldora */

  /* ── Sombras suaves (tinte malva) ── */
  --sh-xs: 0 1px 3px rgba(94, 58, 80, 0.06);
  --sh-sm: 0 2px 8px rgba(94, 58, 80, 0.06);
  --sh-md: 0 10px 30px rgba(94, 58, 80, 0.14);
  --sh-lg: 0 24px 60px rgba(74, 44, 63, 0.18);

  /* ── Transiciones ── */
  --t-fast: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-base: 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-slow: 460ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Layout ── */
  --container:        1240px;
  --container-narrow: 980px;
  --header-h:         88px;
}