/* ============================================================
   BEST — Design Tokens
   Brand palette confirmed by brief (07-julio-2026)
   Strategy: COMMITTED — dark industrial base + green brand moments
   ============================================================ */

:root {
  /* ── Brand colors in OKLCH — calibrado exacto al HEX del brief (07-jul-2026) ── */
  --clr-green:       oklch(56.3% 0.146 150);  /* #1A8C43 – primario, CTAs */
  --clr-green-dark:  oklch(44% 0.128 150);    /* #00642B – hover states */
  --clr-green-light: oklch(72% 0.120 150);    /* tint for bg highlights */
  --clr-green-pale:  oklch(95% 0.028 150);    /* very light tint */

  --clr-slate:       oklch(48.8% 0.028 245);  /* #53626F – texto principal */
  --clr-slate-dark:  oklch(20% 0.022 245);    /* #0D171F – hero bg, footer */
  --clr-slate-mid:   oklch(31% 0.026 245);    /* navbars, dark sections */
  --clr-slate-muted: oklch(62% 0.024 245);    /* muted text on light bg */

  --clr-blue:        oklch(67.6% 0.162 247);  /* #2A9DF4 – acento, enlaces */
  --clr-blue-dark:   oklch(52% 0.150 247);    /* hover para blue elements */

  --clr-bg:          oklch(97.4% 0.003 174);  /* #F4F7F6 – fondo principal */
  --clr-surface:     oklch(100% 0 0);         /* blanco puro para cards */
  --clr-border:      oklch(89% 0.006 174);    /* divisores sutiles */

  /* ── Semantic roles ── */
  --clr-text-primary:   var(--clr-slate);
  --clr-text-dark:      var(--clr-slate-dark);
  --clr-text-muted:     var(--clr-slate-muted);
  --clr-text-on-dark:   oklch(97% 0.006 160);
  --clr-text-on-green:  oklch(97% 0.006 160);

  /* ── Typography ── */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-xs:   clamp(0.75rem,  1.5vw,  0.875rem);
  --fs-sm:   clamp(0.875rem, 1.8vw,  1rem);
  --fs-base: clamp(1rem,     2vw,    1.125rem);
  --fs-md:   clamp(1.125rem, 2.2vw,  1.25rem);
  --fs-lg:   clamp(1.25rem,  2.5vw,  1.5rem);
  --fs-xl:   clamp(1.5rem,   3vw,    2rem);
  --fs-2xl:  clamp(2rem,     4vw,    3rem);
  --fs-3xl:  clamp(2.5rem,   5vw,    4rem);
  --fs-hero: clamp(2.75rem,  7vw,    5.5rem);

  /* ── Spacing ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);
  --grid-gap:      clamp(1rem, 3vw, 2rem);

  /* ── Radii ── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.12);
  --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.10), 0 2px 6px oklch(0% 0 0 / 0.08);
  --shadow-lg:  0 12px 40px oklch(0% 0 0 / 0.12), 0 4px 12px oklch(0% 0 0 / 0.08);
  --shadow-green: 0 4px 24px oklch(52% 0.143 147 / 0.30);

  /* ── Motion ── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;

  /* ── Z-index scale ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-whatsapp:  150;
}