:root{
  /* =========================
     Paleta (pastel + tinta)
     ========================= */
  --ink: #0B1220;        /* texto principal / títulos */
  --slate: #6D6875;      /* texto secundario */
  --mauve: #B5838D;      /* brand / CTA */
  --rose: #E5989B;       /* hover / acento */
  --peach: #FFB4A2;      /* chips */
  --white: #FFFFFF;

  /* =========================
     Mapeo de uso (UI tokens)
     ========================= */
  --bg: var(--white);
  --text: var(--ink);
  --muted: var(--slate);
  --primary: var(--mauve);
  --primary-hover: var(--rose);
  --card: var(--white);
  --separator: #F4D7CC;

  /* =========================
     Transparencias (para no hardcodear rgba)
     ========================= */
  --primary-10: rgba(181,131,141,.10);
  --primary-14: rgba(181,131,141,.14);
  --primary-35: rgba(181,131,141,.35);
  --primary-45: rgba(181,131,141,.45);

  /* =========================
     Tipografía
     ========================= */
  --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* =========================
     Tamaños de fuente
     ========================= */
  --fs-hero: clamp(28px, 5vw, 48px);
  --fs-h2: clamp(22px, 3.2vw, 32px);
  --fs-body: 16px;
  --fs-small: 14px;

  /* =========================
     Espaciado
     ========================= */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* =========================
     Radios + sombras
     ========================= */
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-md: 0 10px 24px rgba(11,18,32,.08);
  --shadow-hover: 0 14px 34px rgba(11,18,32,.10);

  /* =========================
     Accesibilidad
     ========================= */
  --focus-ring: var(--primary-45);
}