/* ============================================================
   VALCARCEL & CO · Design tokens
   Strict 4-color palette + Fraunces / Inter pairing.
   ============================================================ */

/* PP Editorial New — display / titulares / wordmark (self-hosted) */
@font-face { font-family: 'PP Editorial New'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/PPEditorialNew-Ultralight-BF644b21500d0c0.otf') format('opentype'); }
@font-face { font-family: 'PP Editorial New'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/PPEditorialNew-UltralightItalic-BF644b214ff1e9b.otf') format('opentype'); }
@font-face { font-family: 'PP Editorial New'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PPEditorialNew-Regular-BF644b214ff145f.otf') format('opentype'); }
@font-face { font-family: 'PP Editorial New'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/PPEditorialNew-Italic-BF644b214fb0c0a.otf') format('opentype'); }
@font-face { font-family: 'PP Editorial New'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/PPEditorialNew-Ultrabold-BF644b21500840c.otf') format('opentype'); }
@font-face { font-family: 'PP Editorial New'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/PPEditorialNew-UltraboldItalic-BF644b214faef01.otf') format('opentype'); }

/* Inter — self-hosted from fonts/ (18pt optical-size — best general-purpose). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); }

:root {
  /* ---------- Palette (strict, do not extend) ---------- */
  --negro-carbon: #0E0E0E;   /* principal */
  --crema-hueso:  #F4EFE6;   /* secundario, fondos claros */
  --rojo-brasa:   #B43A2F;   /* acento, único cálido */
  --gris-humo:    #6B6863;   /* utilitario, textos secundarios */

  /* RGB / CMYK reference values (for print specs in the manual) */
  --negro-carbon-rgb: 14, 14, 14;
  --crema-hueso-rgb:  244, 239, 230;
  --rojo-brasa-rgb:   180, 58, 47;
  --gris-humo-rgb:    107, 104, 99;

  /* ---------- Semantic colors ---------- */
  --bg:          var(--crema-hueso);
  --bg-inverse:  var(--negro-carbon);
  --bg-accent:   var(--rojo-brasa);

  --fg:          var(--negro-carbon);
  --fg-inverse:  var(--crema-hueso);
  --fg-muted:    var(--gris-humo);
  --fg-accent:   var(--rojo-brasa);

  --rule:        rgba(14, 14, 14, 0.12);
  --rule-strong: var(--negro-carbon);

  /* ---------- Typography families ---------- */
  --serif-display: 'PP Editorial New', 'Times New Roman', Georgia, serif;
  --sans-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type scale (A4 / page-sized) ---------- */
  --fs-display:   clamp(80px, 11vw, 160px);
  --fs-h1:        clamp(48px, 6vw, 72px);
  --fs-h2:        clamp(32px, 4vw, 44px);
  --fs-h3:        22px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-caption:   11px;

  --lh-display:   0.92;
  --lh-headline:  1.04;
  --lh-body:      1.55;
  --lh-caption:   1.4;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing (8px rhythm) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 72px;
  --s-8: 96px;
  --s-9: 144px;

  /* ---------- Page (A4 vertical, used by manual) ---------- */
  --page-w: 794px;   /* 210mm @ 96dpi */
  --page-h: 1123px;  /* 297mm @ 96dpi */
  --page-margin: 72px;
}

/* ---------- Element-level base rules ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--serif-display);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-headline);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}

p, .body {
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.muted { color: var(--fg-muted); }
.accent { color: var(--fg-accent); }

.eyebrow {
  font-family: var(--sans-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.caption {
  font-family: var(--sans-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}

/* ---------- Inverted surfaces ---------- */
.surface-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark .display { color: var(--fg-inverse); }
.surface-dark .muted { color: rgba(244, 239, 230, 0.6); }

.surface-accent {
  background: var(--bg-accent);
  color: var(--fg-inverse);
}
.surface-accent h1, .surface-accent h2, .surface-accent h3, .surface-accent .display { color: var(--fg-inverse); }

/* ---------- Editorial rule ---------- */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule-strong { border-top: 1px solid var(--rule-strong); }