/* =============================================================
   Doniger Balearics — Design tokens
   Fase 2 · v0.3 · 27 julio 2026 — colores y escala contrastados con el .fig
   Fuente provisional: EB Garamond (SIL OFL, autoalojable)
   Sustituir por Cigars Light (display) + Be Vietnam Pro (texto)
   cuando lleguen los .woff2 con licencia.
   ============================================================= */

:root {

  /* ---------- Color ------------------------------------------
     Muestreado de los mockups. Los valores marcados [?] son
     aproximaciones desde PNG y hay que confirmarlos contra Figma.
     --------------------------------------------------------- */

  /* Fondos */
  --c-bg:              #f4f1ec;  /* crema base — leído del .fig (100 muestras) */
  --c-bg-alt:          #eceadf;  /* crema un punto más oscuro (bandas)   [?] */
  --c-bg-card:         #fbfaf7;  /* tarjetas sobre crema                 [?] */
  --c-bg-dark:         #2b3a32;  /* verde profundo de las bandas CTA     [?] */
  --c-bg-black:        #111413;  /* footer — leído del .fig (20 muestras) */

  /* Texto */
  --c-ink:             #1c1c1a;  /* texto principal */
  --c-ink-muted:       #6a6a63;  /* texto secundario y descripciones */
  --c-ink-faint:       #9b9a92;  /* eyebrows, metadatos, captions */
  --c-ink-invert:      #f4f1ec;  /* texto sobre fondo oscuro */
  --c-ink-invert-mut:  rgba(244,241,236,.72);

  /* Marca */
  --c-sand:            #ccc2ad;  /* del SVG del logo — color corporativo */
  --c-sand-deep:       #b3a88f;
  --c-accent:          var(--c-bg-dark);

  /* Líneas */
  --c-rule:            #ddd8ca;  /* hairline sobre crema */
  --c-rule-dark:       rgba(244,241,236,.18);

  /* Estados */
  --c-focus:           #2b3a32;
  --c-error:           #9a3b2c;
  --c-success:         #3d6152;

  /* ---------- Tipografía -------------------------------------
     Una sola familia por ahora. La escala está pensada para que
     al cambiar a Cigars + Be Vietnam solo haya que tocar
     --font-display y --font-text.
     --------------------------------------------------------- */

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-text:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* Escala fluida · valores exactos en 02-tipografia.md
     Notación tamaño/interlineado en px, móvil 360 → desktop 1440 */

  /* Tamaño · fluido entre 360px y 1440px de viewport */
  --t-hero:     clamp(2.7500rem, 1.8333rem + 4.0741vw, 5.5000rem);
  --t-h1:       clamp(2.2500rem, 1.6667rem + 2.5926vw, 4.0000rem);
  --t-h2:       clamp(1.7500rem, 1.3333rem + 1.8519vw, 3.0000rem);
  --t-h3:       clamp(1.3125rem, 1.1458rem + 0.7407vw, 1.8125rem);
  --t-h4:       clamp(1.1250rem, 1.0417rem + 0.3704vw, 1.3750rem);
  --t-lead:     clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);
  --t-body:     clamp(1.0000rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --t-small:    0.875rem;
  --t-caption:  0.8125rem;
  --t-button:   0.8125rem;
  --t-eyebrow:  0.6875rem;

  /* Interlineado · ratio sin unidad, escala con el tamaño */
  --lh-hero:     1.045;   /* 88/92 en desktop · 44/46 en móvil */
  --lh-h1:       1.06;   /* 64/68 en desktop · 36/38 en móvil */
  --lh-h2:       1.13;   /* 48/54 en desktop · 28/32 en móvil */
  --lh-h3:       1.24;   /* 29/36 en desktop · 21/26 en móvil */
  --lh-h4:       1.32;   /* 22/29 en desktop · 18/24 en móvil */
  --lh-lead:     1.6;   /* 19/30 en desktop · 17/27 en móvil */
  --lh-body:     1.65;   /* 17/28 en desktop · 16/26 en móvil */
  --lh-small:    1.57;   /* 14/22 en desktop · 14/22 en móvil */
  --lh-caption:  1.54;   /* 13/20 en desktop · 13/20 en móvil */
  --lh-button:   1.2;   /* 13/16 en desktop · 13/16 en móvil */
  --lh-eyebrow:  1.45;   /* 11/16 en desktop · 11/16 en móvil */

  /* Tracking */
  --ls-hero:     -0.015em;
  --ls-h1:       -0.015em;
  --ls-h2:       -0.01em;
  --ls-h3:       -0.01em;
  --ls-h4:       -0.005em;
  --ls-lead:     0.0em;
  --ls-small:    0.0em;
  --ls-caption:  0.0em;
  --ls-button:   0.1em;
  --ls-eyebrow:  0.18em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---------- Espaciado (base 4px) --------------------------- */

  --s-1:   0.25rem;   /*  4 */
  --s-2:   0.5rem;    /*  8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   2.5rem;    /* 40 */
  --s-8:   3rem;      /* 48 */
  --s-9:   4rem;      /* 64 */
  --s-10:  5rem;      /* 80 */
  --s-11:  6.5rem;    /* 104 */
  --s-12:  8rem;      /* 128 */

  /* Ritmo vertical de sección, fluido */
  --section-y: clamp(4rem, 2.4rem + 7vw, 8.5rem);

  /* ---------- Layout ----------------------------------------- */

  --wrap-max:    1360px;  /* contenedor principal */
  --wrap-text:   680px;   /* medida de lectura de artículos */
  --wrap-narrow: 920px;
  --gutter:      clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --grid-gap:    clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --grid-cols:   12;

  /* Breakpoints (para referencia en JS; en CSS van literales) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1440px;
  --bp-xxl: 1920px;

  /* ---------- Bordes, sombras, movimiento -------------------- */

  --radius-0:  0;        /* el diseño es rectilíneo: casi todo a 0 */
  --radius-sm: 2px;
  --radius-pill: 999px;  /* solo para los círculos de icono */

  --border-hair: 1px solid var(--c-rule);

  --shadow-card: 0 1px 2px rgba(28,28,26,.04), 0 8px 24px rgba(28,28,26,.06);
  --shadow-lift: 0 2px 4px rgba(28,28,26,.06), 0 16px 40px rgba(28,28,26,.10);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  620ms;

  /* ---------- Iconos ----------------------------------------- */

  --icon-sm:     16px;
  --icon:        20px;
  --icon-md:     24px;
  --icon-lg:     32px;
  --icon-stroke: 1.25;

  /* ---------- Capas ------------------------------------------ */

  --z-base:    0;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
}

/* Respeta la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}

/* =============================================================
   Fuente — autoalojada. Coloca los .woff2 en /assets/fonts/
   Descarga: https://fonts.google.com/specimen/EB+Garamond
   (SIL Open Font License — uso comercial y autoalojamiento OK)
   ============================================================= */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-var-italic.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* =============================================================
   Primitivas mínimas — el resto vive en los componentes
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1);   line-height: var(--lh-h1);   letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2);   line-height: var(--lh-h2);   letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3);   line-height: var(--lh-h3);   letter-spacing: var(--ls-h3); }
h4 { font-size: var(--t-h4);   line-height: var(--lh-h4);   letter-spacing: var(--ls-h4); }

.t-hero { font-family: var(--font-display); font-size: var(--t-hero);
          line-height: var(--lh-hero); letter-spacing: var(--ls-hero);
          text-wrap: balance; margin: 0 0 var(--s-5); }
.t-lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-ink-muted); }
.t-small   { font-size: var(--t-small);   line-height: var(--lh-small); }
.t-caption { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--c-ink-faint); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

a { color: inherit; text-underline-offset: .22em; }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

/* Eyebrow: el rótulo en versalitas sobre cada sección */
.eyebrow {
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s-4);
}

/* Icono desde el sprite */
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.on-dark {
  background: var(--c-bg-dark);
  color: var(--c-ink-invert);
}
.on-dark .eyebrow { color: var(--c-ink-invert-mut); }
.on-dark :focus-visible { outline-color: var(--c-sand); }