/* ============================================================================
   GRANJA BLAVA — Tokens + fonts (reconstrucción limpia y responsive)
   Basado fielmente en el design system del prototipo (_ds/colors_and_type.css).
   Autocontenido: sirve de base para el futuro tema de WordPress.
   ============================================================================ */

/* ---- DISPLAY: Mr Eaves XL Sans OT (auto-alojada en assets/fonts) ---- */
@font-face{font-family:'Mr Eaves XL San OT';font-style:normal;font-weight:300;
  src:url('fonts/Mr_Eaves_XL_San_OT_Light.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Mr Eaves XL San OT';font-style:normal;font-weight:400 500;
  src:url('fonts/Mr_Eaves_XL_San_OT_Reg.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Mr Eaves XL San OT';font-style:normal;font-weight:700;
  src:url('fonts/Mr_Eaves_XL_San_OT_Bold.otf') format('opentype');font-display:swap;}
@font-face{font-family:'Mr Eaves XL San OT';font-style:normal;font-weight:800 900;
  src:url('fonts/Mr_Eaves_XL_San_OT_Heavy.otf') format('opentype');font-display:swap;}

/* ---- BODY: Familjen Grotesk (auto-alojada) ---- */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400;
  src:url('fonts/FamiljenGrotesk-Regular.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:500;
  src:url('fonts/FamiljenGrotesk-Medium.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:600;
  src:url('fonts/FamiljenGrotesk-SemiBold.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:700;
  src:url('fonts/FamiljenGrotesk-Bold.ttf') format('truetype');font-display:swap;}

:root{
  /* Paleta pop */
  --gb-verde:#c4fc8b; --gb-azul:#8ac4ff; --gb-marino:#1F2A63;
  --gb-salmon:#ffa8a3; --gb-amarillo:#fae882;
  --gb-verde-soft:#e2fdc6; --gb-azul-soft:#d3e9ff; --gb-salmon-soft:#ffd6d3;
  --gb-amarillo-soft:#fef4c2; --gb-marino-deep:#18204C; --gb-marino-hover:#283575;

  /* Neutros */
  --gb-neutral-900:#232323; --gb-neutral-600:#585858; --gb-neutral-300:#b3b3b3;
  --gb-neutral-100:#e8e8e8; --gb-neutral-50:#f3f3f3; --gb-white:#ffffff;

  /* Roles semánticos */
  --color-text-primary:var(--gb-neutral-900);
  --color-text-secondary:var(--gb-neutral-600);
  --color-bg-default:var(--gb-white);
  --color-bg-surface:var(--gb-neutral-50);
  --color-brand:var(--gb-marino);
  --color-on-brand:var(--gb-white);

  /* Familias */
  --font-display:'Mr Eaves XL San OT','Helvetica Neue',Arial,sans-serif;
  --font-body:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;

  /* Escala tipográfica fluida (del DS) */
  --fs-display:clamp(4.5rem,12vw,13.25rem);
  --fs-h1:clamp(2.75rem,5.5vw,4.0625rem);
  --fs-h2:clamp(2.5rem,5vw,3.75rem);
  --fs-h3:clamp(2.25rem,4.4vw,3.4375rem);
  --fs-h4:clamp(1.75rem,3vw,2.5rem);
  --fs-card:clamp(1.75rem,2.6vw,2.75rem);
  --fs-eyebrow:clamp(0.9rem,1.1vw,1.25rem);
  --fs-lead:clamp(1.15rem,1.6vw,1.5rem);
  --fs-body:clamp(1.05rem,1.25vw,1.25rem);
  --fs-button:1.0625rem;
  --fs-caption:0.90625rem;

  --lh-display:0.81; --lh-tight:0.90; --lh-body:1.21;
  --tracking-display:-0.03em;

  /* Radios */
  --radius-sm:8px; --radius-md:20px; --radius-full:999px;

  /* Spacing base 4px */
  --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px;
  --space-64:64px; --space-80:80px; --space-96:96px; --space-120:120px;

  /* Layout */
  --container:1200px;
  --gutter:clamp(20px,5vw,80px);
}

/* ---- Reset base ---- */
*,*::before,*::after{box-sizing:border-box;}
/* scroll-behavior:smooth lo gestiona Lenis (smooth.js); dejarlo aquí entra en conflicto */
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--color-text-primary);
  background:var(--color-bg-default);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
/* OJO: el img{display:block} de arriba pisa el [hidden]{display:none} del navegador (los
   estilos de autor ganan a los del UA), y el atributo hidden dejaba de funcionar en imagenes.
   Este selector de atributo (0,1,0) gana al de tipo (0,0,1) y lo restaura. */
[hidden]{display:none!important;}  /* !important: hay clases con display:flex/grid que, a igual especificidad, pisaban el atributo hidden (imgs, .pdp-gallery__thumbs, .pdp-variety__specs) */
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);
  line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-weight:400;}
p{margin:0;}