/* REFINE — design tokens (alias layer).
 * Source: prototipo/public/css/tokens.css, rewritten for the block theme (spec theme-base, D1).
 * Values shared with the editor live in theme.json; here they become aliases with the
 * prototype names (--wp--preset--* / --wp--custom--*), so the prototype CSS works unchanged.
 * Component-only values (veils, glass, photo-* surfaces, hero scales) keep their literal value.
 * Fonts: declared with fontFace in theme.json (no @import "fonts.css").
 */
:root {
  /* — Color base (PRD) — */
  --refine-ink: var(--wp--preset--color--ink);
  --refine-offwhite: var(--wp--preset--color--offwhite);
  --refine-cream: var(--wp--preset--color--cream);
  --refine-beige: var(--wp--preset--color--beige);

  /* — Programas: identidad contextual — */
  --tone-flow: var(--wp--preset--color--tone-flow);
  --lean-form: var(--wp--preset--color--lean-form);
  --run-shape: var(--wp--preset--color--run-shape);
  --summer-accent: var(--wp--preset--color--run-shape);
  /* amarillo suave del copy destacado en el hero mobile (muestreado de la ref de Julie) */
  --summer-highlight: var(--wp--preset--color--summer-highlight);
  /* gris neutro de las 3 cards del hero de la landing (muestreado de las refs 2 y 3) */
  --pillar-card: var(--wp--preset--color--pillar-card);
  /* "Así se vive Summer" con los 3 móviles al lado (ref referencia-desktop.png) */
  --exp-sand: var(--wp--preset--color--exp-sand);   /* fondo arena de la sección */
  --exp-ink: var(--wp--preset--color--exp-ink);     /* titulares y kickers */
  --phone-frame: #F4F1E9;     /* marco claro de los móviles laterales */
  --phone-screen: #F3EEE3;    /* fondo de pantalla donde el mock no llega */
  --menu-screen: #E2D3C0;     /* fondo de la pantalla del mock de menú de comidas */

  /* — Summer Challenge (brief web): beige de la Summer Pass y colores de la landing — */
  --pass-card: var(--wp--preset--color--pass-card);
  --summer-pill: var(--wp--preset--color--summer-pill);
  --manifesto-line: rgb(65 20 14 / 0.22);
  --faq-row: rgb(206 209 214 / 0.97);      /* gris-celeste de la ref de FAQs (#CED1D6) */
  --faq-row-open: rgb(226 229 232 / 0.94);          /* botón "Quiero empezar Summer" (muestreado del print de Julie) */
  --summer-deep: var(--wp--preset--color--summer-deep);          /* celeste profundo: acento de texto con contraste sobre claro */
  --summer-ink-soft: var(--wp--preset--color--summer-ink-soft);  /* texto secundario (≥ 6:1 sobre off-white) */
  --summer-line: rgb(34 34 34 / 0.14);
  --summer-line-strong: rgb(34 34 34 / 0.28);
  --bg-card: var(--wp--preset--color--bg-card);
  --mock-shadow: rgb(34 34 34 / 0.35);
  --results-veil: rgb(246 243 238 / 0.62);
  --offer-bg: rgb(246 243 238 / 0.8);
  --sticky-bg: rgb(34 34 34 / 0.9);
  --co-error: var(--wp--preset--color--error);

  /* — Superficies muestreadas de fotografía — */
  --photo-brand-wall: #D6D6D6;
  --photo-method-wall: #B8B3AB;
  --photo-pearl: #C4C2BD;

  /* — Roles — */
  --bg-primary: var(--refine-offwhite);
  --bg-inverse: var(--refine-ink);
  --text-primary: var(--refine-ink);
  --text-on-photo: var(--refine-cream);
  --text-inverse: var(--refine-offwhite);
  --header-bg: rgb(222 213 198 / 0.78);
  --header-bg-scrolled: rgb(222 213 198 / 0.5); /* vidrio: ver .is-scrolled en base.css */
  --hairline-on-photo: rgb(255 254 234 / 0.38);
  /* velo de legibilidad del texto crema sobre foto (Summer, Brand Bridge) — tinta de la marca, muy tenue */
  --text-veil-base: rgb(34 34 34 / 0.08);
  --text-veil-soft: rgb(34 34 34 / 0.16);
  --text-veil-strong: rgb(34 34 34 / 0.3);
  --text-veil-deep: rgb(34 34 34 / 0.5); /* base del hero en mobile, donde el texto va sobre la arena */
  --refiners-veil: rgb(34 34 34 / 0.2);
  /* filtro celeste del Summer Hero (#ADBCC3) */
  /* versión sólida para el hero responsive */
  --summer-tint-solid: rgb(173 188 195 / 0.72);
  --summer-tint-mid: rgb(173 188 195 / 0.36);
  /* velos de Three Ways */
  --ways-veil-top: rgb(34 34 34 / 0.26);
  --ways-veil-dark: rgb(34 34 34 / 0.3);
  --ways-veil-run: rgb(34 34 34 / 0.38);
  --scroll-thumb: rgb(34 34 34 / 0.18);       /* scroll sutil (modal) */
  /* vidrio esmerilado (label "Mi cuenta") */
  --glass-bg: rgb(246 243 238 / 0.28);
  --glass-bg-hover: rgb(246 243 238 / 0.46);
  --glass-border: rgb(255 255 255 / 0.4);
  --glass-shadow: rgb(34 34 34 / 0.35);
  --hairline-inverse: rgb(246 243 238 / 0.16);

  /* — Tipografía — */
  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-narrow: var(--wp--preset--font-family--narrow);
  --font-mono: var(--wp--preset--font-family--mono);

  --fs-display-xl: var(--wp--preset--font-size--display-xl);
  /* Escala del texto de los heros (home y landing Summer). Julie lo quiere más minimal:
     2026-09-26 -20% (0.8) y 2026-09-27 otro -15% sobre eso (0.8 × 0.85 = 0.68).
     Se aplica a título, bajadas, meta y capítulo; no a botones ni cards. */
  --hero-type-scale: 0.68;
  /* Escala del resto del sitio, proporcional al hero (2026-09-27, concepto minimal).
     display: títulos de sección y números/marcas grandes (≥44px de máximo).
     mid: frases destacadas, bajadas grandes y títulos chicos (30–42px).
     El texto corrido, los rótulos y los botones no escalan (ya están en 12–19px). */
  --type-display: 0.68;
  /* Tamaño del wordmark "summer" de los heros, para medir otras cosas contra él
     (mismas fórmulas que .hero__title en styles.css; mobile: bloque ≤1023px). */
  --hero-title-fs: calc(var(--fs-display-xl) * var(--hero-type-scale) * var(--hero-title-scale));
  --type-mid: 0.85;
  /* Sólo el wordmark "summer" de los heros (y el de "Así se vive Summer", que lo iguala):
     2026-09-27 otro -15% encima de --hero-type-scale. */
  --hero-title-scale: 0.85;
  /* Desktop: aire bajo el bloque de texto de los heros (título + bajada + CTA), que va
     por debajo del centro sin llegar al pie (2026-09-27). La landing lo mide hasta sus
     cards; el home suma el alto de esa fila para quedar a la misma altura. */
  --hero-block-bottom: clamp(110px, 16vh, 200px);
  /* Cuerpo de la bajada del hero del home. La landing lo usa para su titular ("Definí tu
     cuerpo…"), así los dos miden lo mismo (2026-09-27). Mobile: ver el bloque ≤1023px. */
  --hero-copy-fs: calc(var(--fs-lead) * var(--hero-type-scale) * 1.1);
  /* Tratamiento de foto cálida y oscurecida, sin el baño celeste (2026-09-27). Nació para
     los heros; hoy lo usa capture.css (foto y velos con el mismo marrón). Los heros del
     home y la landing usan el filtro del final de sections.css. */
  /* 2026-09-27 (ref de Julie): más oscura y desaturada, gris-arena parejo */
  --hero-photo-filter: saturate(0.56) contrast(0.93) brightness(0.55) sepia(0.045); /* punto medio entre 0.6 y 0.5 */
  --hero-veil-rgb: 24 17 12;
  --fs-heading: var(--wp--preset--font-size--heading);
  --fs-lead: var(--wp--preset--font-size--lead);
  /* Escala de TEXTO (no títulos), fija como conceptbarre.com: 24/18/13/12 en desktop,
     18/14 en mobile (2026-09-27). Ajustes propios: cuerpo mobile 15 (párrafos largos),
     botones 13 (el CTA vende) y notas 10 (su 9 no se lee). Mobile: bloque ≤1023px. */
  --t-lg: var(--wp--preset--font-size--lg);   /* frases destacadas, bajadas grandes de sección */
  --t-md: var(--wp--preset--font-size--md);   /* cuerpo, párrafos, FAQ, citas */
  --t-sm: var(--wp--preset--font-size--sm);   /* links del footer, captions, meta */
  --t-xs: var(--wp--preset--font-size--xs);   /* nav, rótulos en mayúsculas */
  --t-btn: 13px;  /* botones */
  --t-2xs: var(--wp--preset--font-size--xxs);  /* notas mínimas */
  --fs-body: var(--wp--preset--font-size--body);
  --fs-small: var(--wp--preset--font-size--small);
  --fs-label: clamp(11px, 0.66vw, 13px);

  /* Interletreado medido en las referencias de Julie: recorte de cada palabra en ref-* comparado
     contra el render real de Be Vietnam Pro a distintos valores (cuánto se tocan las letras).
     Reemplaza el tope de -0.04em del PRD: la referencia manda (pedido de la clienta). */
  --track-display: var(--wp--custom--track--display);         /* títulos display itálicos: summer, THREE WAYS, THE REFINE METHOD, refiners */
  --track-display-xl: var(--wp--custom--track--display-xl);   /* statement muy cerrado: DESCUBRÍ LOS PROGRAMAS (las letras se tocan, no se enciman) */
  --track-program: var(--wp--custom--track--program);         /* nombres de programa (Tone & flow…): cerrados pero sin montarse, como en ref-three-ways */
  --word-program: var(--wp--custom--word--program);           /* "Tone &" : con -0.10 alcanza un espacio corto, como en la ref */
  --track-heading: var(--wp--custom--track--heading);         /* títulos medianos sin ref (landing: Todo organizado, FAQs, Tu acceso…): a <55px el -0.11 amontona */
  --word-heading: var(--wp--custom--word--heading);
  --track-meta: var(--wp--custom--track--meta);               /* líneas display secundarias: 4 semanas · entrenamiento + nutrición */
  --track-title: var(--wp--custom--track--title);             /* títulos rectos sin referencia (checkout, bienvenida, números) */
  --word-display: var(--wp--custom--word--display);           /* compensa el tracking cerrado: las palabras no se pegan (como en las refs) */
  --word-display-xl: var(--wp--custom--word--display-xl);
  --track-tight: var(--wp--custom--track--tight);
  --track-label: var(--wp--custom--track--label);

  /* — Espacio — */
  --space-xs: var(--wp--preset--spacing--xs);
  --space-sm: var(--wp--preset--spacing--sm);
  --space-md: var(--wp--preset--spacing--md);
  --space-lg: var(--wp--preset--spacing--lg);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--xxl);

  /* — Layout — */
  --gutter: var(--wp--custom--layout--gutter);
  --header-top: var(--wp--custom--layout--header-top);
  --header-h: var(--wp--custom--layout--header-h); /* 2026-09-27: -6px, header más minimal */
  /* inicio de la columna editorial (≈ col 3 de 12) */
  --col-start: calc(var(--gutter) + (100vw - 2 * var(--gutter)) * 0.19);

  /* — Motion — */
  --ease-out: var(--wp--custom--motion--ease-out);
  --ease-inout: var(--wp--custom--motion--ease-inout);
  --dur-fast: var(--wp--custom--motion--dur-fast);
  --dur-base: var(--wp--custom--motion--dur-base);
  --dur-slow: var(--wp--custom--motion--dur-slow);
}

/* theme.json does not express media queries: these overrides stay here, with literal values. */
@media (max-width: 1023px) {
  :root {
    --col-start: var(--gutter);
    /* bajada del home en mobile (sin --hero-type-scale, +10% +10%) */
    --hero-copy-fs: calc(clamp(10px, 2.9vw, 18px) * 1.21);
    --hero-title-fs: calc(min(24.2vw, 150px) * var(--hero-type-scale) * var(--hero-title-scale));
    --t-lg: 18px;
    --t-md: 15px;
  }
}
/* Desktop: barra del header +10% (2026-09-27). Todo lo que se posiciona contra
   --header-h acompaña solo. */
@media (min-width: 1024px) {
  :root { --header-h: clamp(38px, 3.57vh, 42px); } /* 2026-09-27: -5% y otro -5% del alto (aire arriba/abajo) */
  /* CTAs +10% en desktop: en mobile se ven bien, acá quedaban chicos (2026-09-28) */
  :root { --t-btn: 14.3px; }
}