:root {
  /* ====================================================================
     Rediseño v4.1 — "Sin Ruido", lienzo claro. El usuario pidió (2026-08-05)
     bajar el negro dominante por un tono más cercano al mensaje de marca
     ("cercana, directa, con los pies en la tierra" — Docs/Marca.md). El
     header sigue oscuro a propósito, como banda de contraste/wayfinding;
     todo lo demás (cuerpo, cards, footer, banda de stats) pasa a lienzo
     claro. Mismos nombres de token que v4 oscuro — quien use var(--color-*)
     no tiene que tocar nada, solo cambia el valor acá. */

  /* Lienzo claro — canvas primario del sitio */
  --color-bg: oklch(96% 0.01 120);            /* neutro cálido, no blanco puro */
  --color-bg-elevated: oklch(99% 0.004 100);  /* cards — más cerca del blanco, efecto "elevado" */
  --color-bg-elevated-2: oklch(94% 0.012 120);
  --color-text: oklch(20% 0.012 140);         /* casi negro, con tibieza verde apenas perceptible */
  --color-text-muted: oklch(46% 0.014 140);
  --color-border: oklch(88% 0.012 120);       /* hairline sobre fondo claro */

  /* Superficie oscura — usada puntualmente (header sticky), nunca el canvas por defecto */
  --color-bg-light: oklch(97% 0.006 90);
  --color-text-on-light: oklch(15% 0.006 145);
  --color-border-on-light: oklch(88% 0.01 140);

  --color-green: oklch(40% 0.15 142);         /* enlaces / eyebrows / texto verde sobre lienzo claro */
  --color-green-bright: oklch(78% 0.19 142);  /* SOLO sobre foto/scrim oscuro (hero, product-card) — no usar en texto sobre el lienzo */
  --color-green-mid: oklch(54% 0.16 142);     /* fondo de CTA/pill, aprox. Pantone 362 — 54% en vez de 56% para que el texto blanco de 13px pase AA (4.75:1, antes 4.37:1) */
  --color-green-dark: oklch(30% 0.13 142);    /* texto verde sobre badges/pills claros */
  --color-green-hover: oklch(48% 0.16 142);

  --color-header-bg: oklch(11% 0.007 155 / .85); /* header sticky oscuro, con blur — única banda oscura del sitio */
  --color-card-border: var(--color-border);
  --color-selection: oklch(80% 0.1 142 / .55);

  /* Texto del header — fijo, NO usa --color-text/--color-text-muted porque esos
     tokens se invierten según el tema de la página, y el header es SIEMPRE oscuro
     (arriba). Sin esto el texto quedaba oscuro-sobre-oscuro en modo claro. */
  --color-header-text: oklch(90% 0.012 140);
  --color-header-text-hover: oklch(99% 0.004 140);

  /* Verde exacto del manual de marca — Pantone 362 / HEX #6B9B3C (Docs/Marca.md).
     Los demás --color-green-* están ajustados por contraste/uso; este es el
     verde de referencia cuando se pide "el verde del manual" tal cual. */
  --color-green-brand: #6B9B3C;

  --color-dark-bg: var(--color-bg);
  --color-dark-muted: var(--color-text-muted);

  --color-nav-active-bg: oklch(28% 0.05 142);
  --color-nav-hover-bg: oklch(24% 0.03 142);
  /* Tinte claro del verde de marca (antes: oklch(26% 0.04 142) — croma tan baja
     que se leía gris, y el texto encima era casi tan oscuro como el fondo). */
  --color-dropdown-hover-bg: oklch(92% 0.055 132);
  --color-dropdown-hover-text: var(--color-green-brand);

  /* Fondo de badge/pill — verde muy claro con texto oscuro. Funciona tanto
     sobre el lienzo claro como "sticker" sobre foto/scrim oscuro (hero) —
     mismo patrón que validó el sistema v1-v3. */
  --color-badge-bg-green: oklch(90% 0.07 142 / .95);

  /* Elevación con tinte de marca — reemplaza el "glow" de blur (pensado para
     lienzo oscuro) por una sombra suave verdosa, la señal de hover en el
     lienzo claro. */
  --glow-green: 0 16px 40px oklch(55% 0.16 142 / .2), 0 2px 8px oklch(20% 0 0 / .06);

  /* Tipografía — rediseño v4: Bricolage Grotesque (display, eje óptico
     variable) reemplaza a Anton; Public Sans sigue de cuerpo; Fragment Mono
     queda como utilitaria para conteos/labels puntuales, no como sistema. */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-data: 'Fragment Mono', ui-monospace, monospace;

  /* Radios */
  --radius-menu: 7px;
  --radius-btn: 9px;
  --radius-panel: 10px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-hero: 20px;
  --radius-carousel: 24px; /* el marco de medio más grande del sitio (carrusel de creatina) */
  --radius-pill: 999px;

  /* Sombras */
  --shadow-dropdown: 0 12px 28px rgba(0,0,0,.1);
  --shadow-card-hover: 0 16px 32px rgba(0,0,0,.08);
  --shadow-mobile-nav: 0 12px 24px rgba(0,0,0,.06);
  --shadow-flavor-active: 0 12px 28px rgba(0,0,0,.22);
  --shadow-flavor-hover: 0 18px 34px rgba(0,0,0,.32);
  --shadow-bar-image: drop-shadow(0 24px 30px rgba(0,0,0,.2));

  /* Breakpoint único documentado en el hand-off */
  --bp-mobile: 760px;

  /* Colores de hover de chips de sabor (hardcoded por sabor, no son parte de la
     paleta de marca — ver Docs/design-handoff-2/README.md sección "Design Tokens").
     Se consumen recién en el Módulo 2 (v2, Home); declarados aquí para tenerlos
     disponibles en un solo lugar. */

  /* Proteína en polvo */
  --flavor-hover-choco-menta: #c9ecc5;
  --flavor-hover-naranja: #fbdcae;
  --flavor-hover-avellana: #d9b899;
  --flavor-hover-coco: #efe0c9;
  --flavor-hover-fresa: #f9cdd8;
  --flavor-hover-vainilla: #f7f2e7;

  /* Barras de proteína */
  --flavor-hover-brownie: #C9A66B;
  --flavor-hover-frutos-rojos: #F4A6A0;
  --flavor-hover-leche-coco: #E4C9A6;
  --flavor-hover-tarta-queso: #F4A6A0;

  /* Creatina en polvo (estado activo, no solo hover) */
  --flavor-active-creatina-pura: #D9D9D9;
  --flavor-active-creatina-cola: #D9B899;
  --flavor-active-creatina-sandia: #F9CDD8;
}

/* ========================================================================
   Modo oscuro — automático vía prefers-color-scheme (sin toggle manual,
   taste-skill Sección 8.C: "respetar la preferencia del sistema salvo que
   la marca insista en un solo modo"). Mismos nombres de token que arriba,
   así que ningún CSS de página necesita tocarse — solo se sobreescribe el
   valor acá. Sin negro/blanco puro (Sección 8.B), mismo verde de marca como
   único acento, contraste AA verificado en los pares texto/fondo reales. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: oklch(18% 0.012 145);
    --color-bg-elevated: oklch(23% 0.013 145);
    --color-bg-elevated-2: oklch(27% 0.014 145);
    --color-text: oklch(93% 0.007 140);
    --color-text-muted: oklch(68% 0.012 140);
    --color-border: oklch(32% 0.014 145);

    --color-green: oklch(72% 0.17 142);         /* enlaces/eyebrows: más claro para leerse sobre el lienzo oscuro (8.04:1) */
    --color-green-dark: oklch(85% 0.13 142);    /* texto de badge/pill — se invierte a claro porque el fondo del badge también se invierte */
    --color-green-hover: oklch(66% 0.16 142);
    /* --color-green-bright y --color-green-mid NO cambian: ya estaban pensados
       para superficies oscuras (bright) o para fondo de botón con texto blanco
       (mid, 4.75:1 sin importar el lienzo de la página). */

    --color-badge-bg-green: oklch(30% 0.09 142 / .5);
    --color-dropdown-hover-bg: oklch(32% 0.07 132 / .6);

    --glow-green: 0 16px 40px oklch(60% 0.18 142 / .3), 0 2px 10px oklch(0% 0 0 / .5);
    --shadow-dropdown: 0 12px 28px rgba(0,0,0,.5);
    --shadow-card-hover: 0 16px 32px rgba(0,0,0,.4);
    --shadow-mobile-nav: 0 12px 24px rgba(0,0,0,.4);
  }
}