/* ==========================================================================
   TOMATO · Architecture of Serenity · 2026
   Colors + Typography tokens
   Source: Brand Identity & Logo System 2026 (overrides Strategic Playbook
   and Web Brief tokens — see README §Visual Foundations).
   ========================================================================== */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-VariableFont_wght.woff2") format("woff2"),
       url("../fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic-VariableFont_wght.woff2") format("woff2"),
       url("../fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Yourlove — the lyric / 5% accent. Reserved for pull-quotes, signatures,
   and the "Architecture of Serenity" tagline. Never in body or UI. */
@font-face {
  font-family: "Yourlove";
  src: url("../fonts/YourLove.woff2") format("woff2"),
       url("../fonts/YourLove.otf")   format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Brand colors (from monogram) ------------------------------------ */
  --forest:     #303E2B;   /* primary · titulares · isotipo principal      */
  --moss:       #797F77;   /* secundario neutro cálido · overlays · UI sec */
  --terracotta: #6D281F;   /* acento simbólico · campañas · micro-detalle  */
  --ink:        #1A1A1A;   /* monocromía técnica · text editorial          */

  /* ----- Operational neutrals ------------------------------------------- */
  --offwhite:   #F9F8F6;   /* fondo dominante                              */
  --sand:       #D9D2C5;   /* fondo cálido · separadores · hover sec       */
  --slate:      #4A4E51;   /* texto secundario técnico · UI                */
  --muted:      #636363;   /* captions · metadatos · disabled              */

  /* Gray operational surfaces — used to carry weight without leaning on
     Forest (verde) or Sand (beige). Cool neutral, derived from Slate. */
  --stone-50:   #F1F1F0;   /* alt fondo neutro · separa de Off-White       */
  --stone-100:  #E6E6E5;   /* fondo gris claro · cards / blocks            */
  --stone-200:  #C9CACB;   /* divisor gris medio                           */
  --graphite:   #2B2D2E;   /* fondo oscuro neutro · alt al Forest          */

  /* ----- Semantic surfaces / text --------------------------------------- */
  --bg:           var(--offwhite);
  --bg-warm:      var(--sand);
  --bg-dark:      var(--forest);
  --bg-campaign:  var(--terracotta);
  --fg:           var(--ink);
  --fg-display:   var(--forest);
  --fg-secondary: var(--slate);
  --fg-muted:     var(--muted);
  --fg-on-dark:   var(--offwhite);
  --accent:       var(--terracotta);
  --line:         var(--sand);
  --line-strong:  var(--forest);

  /* ----- Type families -------------------------------------------------- */
  --font-sans: "Hanken Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "Yourlove", "Caveat", "Hanken Grotesk", cursive;

  /* ----- Spacing scale (×8) --------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;
  --space-10: 192px;
  --space-11: 240px;

  /* ----- Section padding presets (desktop / mobile) --------------------- */
  --pad-compact-y:   96px;
  --pad-standard-y: 128px;
  --pad-editorial-y: 192px;
  --pad-hero-y:     240px;

  /* ----- Borders & shape ------------------------------------------------ */
  --hair: 1px;
  --rule: 1px solid var(--sand);
  --rule-strong: 1px solid var(--forest);

  /* TOMATO has no rounded corners on UI surfaces (precision/architecture).
     The only "round" form in the brand is the isotipo circle. */
  --radius-0: 0px;
  --radius-pill: 999px; /* reserved exclusively for isotipo / circular marks */

  /* ----- Motion --------------------------------------------------------- */
  --ease-serene: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* ----- Type scale (desktop, base 16px, ratio ≈ 1.25) ------------------ */
  --fs-display-xl: clamp(56px, 8vw, 128px);
  --fs-display-l:  clamp(44px, 5.4vw, 80px);
  --fs-display-m:  clamp(36px, 3.8vw, 56px);
  --fs-h1:         clamp(28px, 2.6vw, 40px);
  --fs-h2:         clamp(22px, 1.8vw, 28px);
  --fs-h3:         20px;
  --fs-body-l:     19px;
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-eyebrow:    12px;
  --fs-pull:       clamp(36px, 4vw, 60px);
}

/* ==========================================================================
   Element defaults
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-display);
  margin: 0;
  text-wrap: pretty;
}

/* Display (hero / manifest) — Hanken Light, generous, slight negative track */
.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.display-l {
  font-size: var(--fs-display-l);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.display-m {
  font-size: var(--fs-display-m);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.22; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.28; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.4; }

p, .body  { font-size: var(--fs-body); line-height: 1.6; color: var(--fg); }
.body-l   { font-size: var(--fs-body-l); line-height: 1.6; }
.small    { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-secondary); }
.caption  { font-size: var(--fs-eyebrow); line-height: 1.4; color: var(--fg-muted); }

/* Eyebrow — UPPERCASE, +0.16em tracking, 12px */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-secondary);
  display: inline-block;
}

/* Nav / CTA labels — UPPERCASE, +0.12em */
.nav, .btn-label {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-display);
}

/* Lyric accent — Yourlove (5%, max 1–2 per piece) */
.lyric, .pull-quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-pull);
  line-height: 1.18;
  color: var(--fg-display);
  letter-spacing: 0;
}

/* Quote block — left rule, indent, lyric body */
.quote-block {
  border-left: 2px solid var(--forest);
  padding-left: var(--space-4);
  margin: var(--space-10) 0;
}
.quote-block .quote {
  font-family: var(--font-script);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.22;
  color: var(--fg-display);
}
.quote-block .attribution {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

/* Inline emphasis — never color, never underline */
em, .emph { font-style: italic; }
strong { font-weight: 500; }

/* Editorial measure — never wider than 680px */
.measure { max-width: 680px; }
.measure-wide { max-width: 720px; }

/* Reusable surfaces */
.surface-offwhite   { background: var(--offwhite); color: var(--fg); }
.surface-sand       { background: var(--sand);     color: var(--fg); }
.surface-stone      { background: var(--stone-50); color: var(--fg); }
.surface-stone-100  { background: var(--stone-100); color: var(--fg); }
.surface-graphite   { background: var(--graphite); color: var(--fg-on-dark); }
.surface-forest     { background: var(--forest);   color: var(--fg-on-dark); }
.surface-terracotta { background: var(--terracotta); color: var(--fg-on-dark); }

.surface-forest h1, .surface-forest h2, .surface-forest h3,
.surface-graphite h1, .surface-graphite h2, .surface-graphite h3,
.surface-terracotta h1, .surface-terracotta h2, .surface-terracotta h3 {
  color: var(--fg-on-dark);
}

/* Hairline rule */
.hr { height: 1px; background: var(--line); border: 0; }