/* ================================================================
   Hattori.arq — Color & Type Foundations
   ----------------------------------------------------------------
   Source: uploads/Hattori_Manual de Identidad.pdf (Florencia Díaz, ENE 2026)
   NOTE: Exact hex values for the palette could not be extracted from
   Paleta.pdf programmatically. The values below are best-fit
   approximations of a quiet, neutral architectural palette
   ("Principales" + "Complementario" + "Degradados sugeridos") and
   should be confirmed against the original swatch PDF.
   ================================================================ */

/* ---- Webfonts ---------------------------------------------------*/
@font-face {
  font-family: "Creato Display";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/CreatoDisplay-Light.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 300;
  font-style: italic;
  src: url("fonts/CreatoDisplay-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/CreatoDisplay-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/CreatoDisplay-BoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 800;
  font-style: normal;
  src: url("fonts/CreatoDisplay-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 800;
  font-style: italic;
  src: url("fonts/CreatoDisplay-ExtraBoldItalic.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 900;
  font-style: normal;
  src: url("fonts/CreatoDisplay-Black.otf") format("opentype");
}
@font-face {
  font-family: "Creato Display";
  font-weight: 900;
  font-style: italic;
  src: url("fonts/CreatoDisplay-BlackItalic.otf") format("opentype");
}

/* Red Hat Mono — secondary, free-license, from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap");

:root {
  /* ---- Color tokens — Principales ------------------------------ */
  --paper:        #F2EDE4;   /* warm off-white, primary background */
  --bone:         #E6DFD2;   /* slightly deeper paper, subtle fields */
  --ink:          #1A1A1A;   /* near-black, primary foreground */
  --stone:        #5C5751;   /* warm mid-gray, secondary text */

  /* ---- Color tokens — Complementario --------------------------- */
  --clay:         #8C6E54;   /* warm earth — accent, complementario */
  --terra:        #B89377;   /* lighter clay tint */
  --moss:         #6B6A4E;   /* dusty olive — secondary accent */

  /* ---- Halftones (medios tonos) -------------------------------- */
  /* Spec calls for 30% / 50% / 80%. Never 100%. */
  --halftone-30:  rgba(26, 26, 26, 0.30);
  --halftone-50:  rgba(26, 26, 26, 0.50);
  --halftone-80:  rgba(26, 26, 26, 0.80);

  /* ---- Suggested gradients (degradados sugeridos) -------------- */
  --grad-paper-clay:  linear-gradient(135deg, var(--paper) 0%, var(--clay) 100%);
  --grad-ink-stone:   linear-gradient(135deg, var(--ink)   0%, var(--stone) 100%);
  --grad-paper-bone:  linear-gradient(180deg, var(--paper) 0%, var(--bone)  100%);

  /* ---- Semantic foreground / background ------------------------ */
  --bg:           var(--paper);
  --bg-alt:       var(--bone);
  --bg-inverse:   var(--ink);
  --fg:           var(--ink);
  --fg-2:         var(--stone);
  --fg-inverse:   var(--paper);
  --rule:         rgba(26, 26, 26, 0.12);
  --rule-strong:  rgba(26, 26, 26, 0.30);
  --accent:       var(--clay);

  /* ---- Type families ------------------------------------------- */
  --font-display: "Creato Display", "Neue Haas Grotesk Display Pro",
                  "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "Red Hat Mono", "Azeret Mono", ui-monospace,
                  SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type weights -------------------------------------------- */
  --w-light:    300;
  --w-bold:     700;
  --w-xbold:    800;
  --w-black:    900;

  /* ---- Type scale (px @ 16 base) ------------------------------- */
  --t-display:  clamp(56px, 9vw, 144px);   /* hero / cover */
  --t-h1:       clamp(40px, 6vw, 80px);
  --t-h2:       clamp(28px, 4vw, 48px);
  --t-h3:       22px;
  --t-eyebrow:  12px;     /* mono, tracked */
  --t-body:     16px;
  --t-small:    13px;
  --t-caption:  11px;

  /* ---- Tracking ------------------------------------------------ */
  --tr-tight:   -0.02em;
  --tr-display: -0.04em;   /* logo-style display tracking */
  --tr-mono:    0.06em;    /* eyebrow / metadata in mono */

  /* ---- Spacing (8px grid) -------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---- Radii — minimal, mostly square -------------------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---- Shadows — used sparingly, soft, warm-tinted ------------- */
  --shadow-1: 0 1px 2px rgba(26,26,26,0.04), 0 2px 8px rgba(26,26,26,0.04);
  --shadow-2: 0 8px 28px rgba(26,26,26,0.08);

  /* ---- Motion -------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ---- Semantic element styles ----------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: var(--tr-tight);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: 0;
}

.eyebrow, .meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 22px;
  line-height: 1.4;
}

small, .small {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--fg-2);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ---- Inverse surfaces ------------------------------------------ */
.surface-ink {
  background: var(--ink);
  color: var(--paper);
  --rule: rgba(242, 237, 228, 0.18);
}
.surface-bone {
  background: var(--bone);
  color: var(--ink);
}

/* ---- Halftone pattern utility (subtle dotted veil) ------------- */
.halftone {
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 6px 6px;
  opacity: 0.5;
}