/* ==========================================================================
   CET Juntos · Design tokens
   Única fuente de colores, tipografía, espaciado y sombras del sitio.
   ========================================================================== */

:root {
  /* --- Marca --- */
  --color-primary: #D62828;
  --color-primary-hover: #B82222;
  --color-primary-subtle: rgba(214, 40, 40, 0.08);

  /* --- Texto (Carbón cálido: negros y grises con base marrón, no azulada) --- */
  --color-carbon: #24201D;
  --color-carbon-light: #4F4843;
  --color-carbon-muted: #6B635C;  /* contraste ≥ 4,5:1 sobre todos los fondos del sitio */
  --color-white: #FFFFFF;

  /* --- Fondos --- */
  --color-bg-light: #FFFDFA;   /* fondo general (blanco apenas cálido) */
  --color-bg-alt: #F3EBE2;     /* hover suave e íconos neutros */
  --color-cream: #FCF7F1;      /* tarjetas y superficies suaves */
  --color-bg-sand: #FAF4ED;    /* secciones alternas (crema cálido) */

  /* --- Paleta "Joy" (colores de la flor del logo) --- */
  --color-joy-red: #E22E38;
  --color-joy-yellow: #E7A912;
  --color-joy-blue: #4A90E2;
  --color-joy-green: #2A9D8F;
  --color-joy-purple: #9333EA;
  --color-joy-orange: #EA580C;

  /* Tintes claros de la paleta Joy (fondos de íconos) */
  --color-tint-red: #FEF5F6;
  --color-tint-yellow: #FDF8E7;
  --color-tint-blue: #F4F8FD;
  --color-tint-green: #F1F7F5;

  /* Variantes luminosas para fondos oscuros (trust bar del hero) */
  --color-joy-red-light: #FF8A91;
  --color-joy-yellow-light: #FFD166;
  --color-joy-blue-light: #8CBEFF;

  /* Trazo del subrayado manuscrito del hero */
  --color-highlight-stroke: #E8443A;

  /* --- Pasteles del Design System --- */
  --color-pastel-green: #DDE9DF;
  --color-pastel-blue: #DCEAF1;
  --color-pastel-yellow: #F3E5B5;
  --color-pastel-coral: #F5DEDA;

  /* --- Bordes --- */
  --color-border: #E2DAD0;
  --color-border-subtle: rgba(226, 218, 208, 0.5);
  --color-border-warm: #E8DFD4;

  /* --- Funcionales --- */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #0E7A43;   /* fondo de botón con texto blanco (contraste ≥ 4,5:1) */

  /* --- Canales RGB para transparencias: rgba(var(--rgb-x), alfa) --- */
  --rgb-black: 0, 0, 0;
  --rgb-white: 255, 255, 255;
  --rgb-carbon: 36, 32, 29;
  --rgb-ink: 22, 18, 16;           /* velos oscuros (hero, Admisión): negro cálido */  --rgb-joy-red: 226, 46, 56;
  --rgb-joy-yellow: 231, 169, 18;
  --rgb-joy-blue: 74, 144, 226;
  --rgb-whatsapp: 37, 211, 102;

  /* --- Tipografía (Plus Jakarta Sans) --- */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-h1-size: 4rem;
  --font-h1-lh: 1.05;
  --font-h1-weight: 800;

  --font-h2-size: 3rem;
  --font-h2-lh: 1.10;
  --font-h2-weight: 800;

  --font-h3-size: 2rem;
  --font-h3-lh: 1.20;
  --font-h3-weight: 800;

  --font-h4-size: 1.5rem;
  --font-h4-lh: 1.25;
  --font-h4-weight: 800;

  --font-body-lead-size: 1.25rem;
  --font-body-lead-lh: 1.55;
  --font-body-lead-weight: 400;

  --font-body-size: 1.125rem;
  --font-body-lh: 1.60;
  --font-body-weight: 400;

  --font-btn-size: 1rem;
  --font-btn-lh: 1.20;
  --font-btn-weight: 600;

  --font-pretitle-size: 0.875rem;
  --font-pretitle-lh: 1.20;
  --font-pretitle-weight: 600;
  --font-pretitle-spacing: 0.08em;

  --font-caption-size: 0.875rem;
  --font-caption-lh: 1.45;
  --font-caption-weight: 400;

  /* --- Espaciado --- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-120: 7.5rem;

  /* --- Layout --- */
  --container-max-width: 92.5rem;
  --gutter-desktop: 5rem;
  --gutter-mobile: 1.25rem;
  --header-height: 5.25rem;
  --top-bar-height: 2.25rem;

  /* --- Área táctil ---
     Mínimo para tocar con el dedo: 44 px. Con la escala general al 95 %,
     2.75rem da 42 px, así que se asegura el piso en px (si la persona agranda
     la letra del navegador, crece con el rem) */
  --size-tap: max(2.75rem, 44px);

  /* --- Radios --- */
  --radius-btn: 62.4375rem;
  --radius-pill: 6.25rem;

  /* --- Sombras --- */
  --shadow-elevated: 0 0.5rem 1.5rem rgba(var(--rgb-carbon), 0.08);
  --shadow-card: 0 1rem 2.5rem rgba(var(--rgb-black), 0.04);
  --shadow-card-hover: 0 1.5rem 3rem rgba(var(--rgb-black), 0.08);

  /* --- Transiciones --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-normal: 0.3s var(--ease-out);
}

/* Escala tipográfica mobile */
@media (max-width: 768px) {
  :root {
    --header-height: 4.5rem;
    --font-h1-size: 2.625rem;
    --font-h1-lh: 1.08;
    --font-h2-size: 2.125rem;
    --font-h2-lh: 1.12;
    --font-h3-size: 1.625rem;
    --font-h4-size: 1.3125rem;
    --font-body-lead-size: 1.125rem;
    --font-body-size: 1rem;
    --font-pretitle-size: 0.8125rem;
    --font-caption-size: 0.8125rem;
  }
}