/* ============================================================
   CHD Design System — Design Tokens (única fuente de verdad)
   Marca: naranja (acción) + verde (identidad/salud). Logo CHD verde.
   Editar SOLO acá los valores globales; el resto del tema los consume.
   ============================================================ */

:root {

	/* ---------- 1. Paleta de marca ---------- */

	/* Naranja — color primario de acción (CTA, links, estados activos) */
	--c-orange-50:   #fff4e8;
	--c-orange-100:  #fde0c2;
	--c-orange-200:  #fbc78f;
	--c-orange-300:  #f9ab5b;
	--c-orange-400:  #f59232;
	--c-orange-500:  #ee7c12;   /* PRIMARIO */
	--c-orange-600:  #d76a06;
	--c-orange-700:  #b0560a;
	--c-orange-800:  #8a440b;

	/* Verde — secundario / identidad (logo, éxito, acentos informativos) */
	--c-green-50:    #eef7e2;
	--c-green-100:   #d8eebd;
	--c-green-200:   #bfe293;
	--c-green-300:   #9fce63;
	--c-green-400:   #7bb33c;
	--c-green-500:   #5da529;
	--c-green-600:   #3e8e2a;   /* SECUNDARIO */
	--c-green-700:   #2f7e33;   /* verde profundo del logo */
	--c-green-800:   #235f27;

	/* Lima — acento vibrante (detalles, highlights) */
	--c-lime-400:    #8cc63e;
	--c-lime-500:    #76b82a;

	/* Rojo-coral — acento de los anillos del isologo (usar con moderación / error) */
	--c-coral-500:   #e1431e;
	--c-coral-600:   #c2360f;

	/* Neutrales (cálidos) */
	--c-ink:         #20251f;
	--c-ink-soft:    #3a423a;
	--c-muted:       #5e6a60;
	--c-line:        #e8e9e3;
	--c-surface:     #ffffff;
	--c-surface-2:   #f6f8f2;
	--c-white:       #ffffff;

	/* ---------- 2. Roles semánticos ---------- */
	/* Identidad 100% verde (logo CHD). El naranja queda solo como escala sin usar. */
	--color-primary:        var(--c-green-700);
	--color-primary-strong: var(--c-green-800);
	--color-primary-dark:   #134d20;
	--color-primary-soft:   var(--c-green-50);
	--color-primary-soft-2: var(--c-green-100);

	--color-secondary:      var(--c-green-600);
	--color-secondary-dark: var(--c-green-700);
	--color-secondary-soft: var(--c-green-50);

	--color-accent:         var(--c-lime-400);
	--color-success:        var(--c-green-500);
	--color-danger:         var(--c-coral-500);
	--color-whatsapp:       #25d366;

	--color-text:           var(--c-ink);
	--color-text-muted:     var(--c-muted);
	--color-border:         var(--c-line);
	--color-bg:             var(--c-surface);
	--color-bg-soft:        var(--c-surface-2);

	/* Gradientes de marca */
	--grad-hero:   linear-gradient(155deg, var(--c-green-50) 0%, #ffffff 60%);
	--grad-brand:  linear-gradient(120deg, var(--c-green-700), var(--c-lime-400));
	--grad-blob:   radial-gradient(circle at 32% 30%, var(--c-lime-400), var(--c-green-700) 70%);
	--grad-cta:    linear-gradient(120deg, var(--c-green-700) 0%, var(--c-green-500) 50%, var(--c-lime-400) 100%);

	/* ---------- 3. Tipografía ---------- */
	--font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-display: 'Poppins', 'Inter', system-ui, sans-serif;

	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-extrabold: 800;

	--lh-tight:     1.15;
	--lh-snug:      1.3;
	--lh-normal:    1.6;

	--ls-tight:     -0.02em;
	--ls-wide:      0.14em;

	/* Escala tipográfica (fluida en titulares) */
	--fs-xs:    0.78rem;
	--fs-sm:    0.875rem;
	--fs-base:  1rem;
	--fs-md:    1.125rem;
	--fs-lg:    clamp(1.2rem, 1.6vw, 1.35rem);
	--fs-xl:    clamp(1.45rem, 2.2vw, 1.75rem);
	--fs-2xl:   clamp(1.7rem, 3vw, 2.4rem);
	--fs-3xl:   clamp(2rem, 4.5vw, 3rem);
	--fs-4xl:   clamp(2.1rem, 5vw, 3.5rem);

	/* ---------- 4. Espaciado (base 4px) ---------- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 56px;
	--space-16: 72px;
	--space-20: 96px;

	/* ---------- 5. Radios ---------- */
	--radius-xs:   6px;
	--radius-sm:   9px;
	--radius-md:   14px;
	--radius-lg:   22px;
	--radius-pill: 999px;

	/* ---------- 6. Sombras (tintadas a la marca) ---------- */
	--shadow-sm:    0 1px 2px rgba(32,37,31,.06);
	--shadow-md:    0 1px 2px rgba(32,37,31,.06), 0 8px 22px rgba(32,37,31,.08);
	--shadow-lg:    0 12px 40px rgba(32,37,31,.14);
	--shadow-brand: 0 8px 20px rgba(47,125,51,.30);
	--shadow-green: 0 8px 20px rgba(47,126,51,.28);

	/* ---------- 7. Layout y movimiento ---------- */
	--container:    1160px;
	--container-narrow: 760px;
	--gap:          24px;

	--t-fast:  .15s;
	--t-base:  .22s;
	--ease:    cubic-bezier(.2,.7,.3,1);

	--z-header: 100;
	--z-filters: 40;
	--z-overlay: 200;


	/* ============================================================
	   Capa de compatibilidad — nombres legacy usados por main.css.
	   Mapeados a los nuevos roles. No agregar lógica nueva acá.
	   ============================================================ */
	--brand:        var(--color-primary);
	--brand-600:    var(--color-primary-strong);
	--brand-700:    var(--color-primary-dark);
	--brand-50:     var(--color-primary-soft);
	--brand-100:    var(--color-primary-soft-2);
	--green:        var(--color-secondary);
	--green-600:    var(--c-green-600);
	--green-700:    var(--c-green-700);
	--green-50:     var(--c-green-50);
	--green-100:    var(--c-green-100);
	--accent:       var(--color-accent);
	--ink:          var(--color-text);
	--muted:        var(--color-text-muted);
	--line:         var(--color-border);
	--bg:           var(--color-bg);
	--bg-soft:      var(--color-bg-soft);
	--white:        var(--c-white);
	--wa:           var(--color-whatsapp);
	--ok:           var(--color-success);

	--radius:       var(--radius-md);
	--shadow:       var(--shadow-md);

	--font:         var(--font-sans);
}