/*
 * Cuidanza — tokens de marca
 * Todas las reglas visuales parten de aquí. Si cambias un valor aquí,
 * cambia en toda la web. No duplicar colores/espacios en main.css.
 */

:root {
  /* --- Color principal (teal del logo "Cuida") --- */
  --c-teal-900: #0F3E3D;
  --c-teal-700: #1C6A69;
  --c-teal-600: #227B7A;   /* primario — cuerpo del logo */
  --c-teal-500: #2E938F;
  --c-teal-100: #D4E8E6;
  --c-teal-50:  #EBF4F3;

  /* --- Naranja acento (parte "nza" del logo + highlights) --- */
  --c-orange-700: #BE6E1E;
  --c-orange-600: #D97F22;
  --c-orange-500: #E68A2E;  /* primario acento */
  --c-orange-400: #F0A158;
  --c-orange-100: #FCE5CC;

  /* --- Crema / fondo cálido --- */
  --c-cream-200: #EDE3D0;
  --c-cream-100: #F5EEE0;   /* fondo del logo */
  --c-cream-50:  #FBF7EE;

  /* --- Grises (textos, bordes) --- */
  --c-ink-900:   #152625;   /* texto fuerte */
  --c-ink-700:   #2C3E3D;   /* texto body */
  --c-ink-500:   #5A6D6C;   /* texto suave */
  --c-ink-300:   #A6B3B2;   /* bordes, placeholders */
  --c-ink-100:   #DCE3E2;   /* líneas finas */
  --c-white:     #FFFFFF;

  /* --- Semánticas --- */
  --c-bg:         var(--c-cream-50);
  --c-bg-alt:     var(--c-cream-100);
  --c-surface:    var(--c-white);
  --c-text:       var(--c-ink-700);
  --c-text-soft:  var(--c-ink-500);
  --c-heading:    var(--c-ink-900);
  --c-primary:    var(--c-teal-600);
  --c-primary-dark: var(--c-teal-700);
  --c-accent:     var(--c-orange-500);
  --c-accent-dark: var(--c-orange-600);
  --c-border:     var(--c-ink-100);

  /* --- Tipografías (cargadas desde Google Fonts en header.php) ---
     Fraunces: serif cálida con carácter humano, para títulos.
     Nunito:  sans redondeada coherente con el logo, para UI y body.
     Rechazo explícito de Inter-por-defecto para no caer en "look IA". */
  --f-display: "Fraunces", "Georgia", serif;
  --f-body:    "Nunito", system-ui, -apple-system, sans-serif;

  /* --- Escala tipográfica (perfect fourth, 1.333) --- */
  --fs-h1: clamp(2.4rem, 1.4rem + 3vw, 3.8rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  --fs-h3: clamp(1.4rem, 1.1rem + 0.8vw, 1.7rem);
  --fs-body: 1.0625rem;   /* 17px — cómodo para lectores mayores */
  --fs-small: 0.9375rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* --- Espacio (escala 4px) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;

  /* --- Radio, sombra --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(21, 38, 37, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(21, 38, 37, 0.18);
  --shadow-lg: 0 20px 50px -20px rgba(21, 38, 37, 0.28);

  /* --- Ancho contenedor --- */
  --w-narrow: 640px;
  --w-body:   880px;
  --w-wide:   1180px;

  /* --- Transiciones --- */
  --t-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-base: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}