/* ==========================================================================
   PROBIFY by LHA — Design tokens
   Estos tokens migran 1:1 a tailwind.config.ts / globals.css en Next.js.
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.woff?h=a753e7b6') format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff?h=12b2af2c') format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff?h=16878e51') format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff?h=142fd27d') format('woff'); }

:root {
  /* --- Color: base "ink" (fondo profundo, no azul saturado) --- */
  --ink-950: #070a14;
  --ink-900: #0b1020;
  --ink-800: #111831;
  --ink-700: #1a2344;
  --ink-600: #26305a;

  /* --- Color: texto --- */
  --fg: #f4f5fa;
  --fg-muted: rgba(244, 245, 250, 0.68);
  --fg-subtle: rgba(244, 245, 250, 0.42);
  --line: rgba(244, 245, 250, 0.12);
  --line-strong: rgba(244, 245, 250, 0.24);

  /* --- Color: marca (del isotipo y del copy aprobado) --- */
  --brand-lime: #8dc63f;      /* acento del copy del cliente; uso puntual, nunca de fondo */
  --brand-magenta: #e4007c;
  --brand-blue: #1e90d8;
  --brand-violet: #7b5ea7;
  --brand-green: #5cb85c;

  /* --- Color: acento por producto (medido sobre empaque) --- */
  --p-aura: #7b5ea7;    --p-aura-deep: #2b2451;
  --p-v: #e4007c;       --p-v-deep: #d775a6;
  --p-fortix: #1e90d8;  --p-fortix-deep: #0c2461;
  --p-pro: #8dc63f;     --p-pro-deep: #0b5d3b;

  /* Acento activo (cambia por producto en la sección "Los 4") */
  --accent: var(--brand-blue);

  /* --- Tipografía --- */
  --font-sans: 'Poppins', 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 6rem);       /* H1 hero */
  --fs-h2: clamp(2rem, 1rem + 3.2vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.875rem;
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --track-display: -0.03em;
  --track-eyebrow: 0.18em;

  /* --- Spacing (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: 4rem;  --s-9: 6rem;  --s-10: 8rem; --s-11: 12rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --container: 88rem;      /* 1408px */
  --container-text: 40rem;

  /* --- Radius --- */
  --r-sm: 0.375rem; --r-md: 0.75rem; --r-lg: 1.25rem; --r-pill: 999px;

  /* --- Sombras / luz (contenidas: nada exagerado) --- */
  --shadow-product: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 120px -20px color-mix(in oklab, var(--accent) 55%, transparent);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms; --dur-base: 420ms; --dur-slow: 900ms; --dur-cine: 1200ms;

  /* --- Z --- */
  --z-nav: 50; --z-preloader: 100;

  /* --- Breakpoints (referencia; CSS usa media queries literales) ---
     sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */

  color-scheme: dark;
}

/* Escala de escena para pantallas anchas: el contenedor y la tipografía de display crecen; el texto largo sigue acotado por --container-text */
@media (min-width: 1600px) {
  :root {
    --container: 100rem;                                    /* 1600px */
    --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 7rem);
    --fs-h2: clamp(2rem, 1rem + 3.2vw, 4.25rem);
    --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem);
    --gutter: clamp(2rem, 4vw, 5rem);
  }
}