/* House of Mal — design tokens
   Ported from the design system (cd-export/_ds/.../tokens/).
   Fonts are the licensed brand faces, self-hosted from ../fonts — never
   substitute Google Fonts or any remote CDN. */

/* — Licensed faces —
   Ninna (Margot Leveque Studio) · FreightDisp Pro (Monotype) · Apercu (Colophon Foundry)
   EULAs live in cd-export/fonts-licensed/. */

@font-face {
  font-family: "Ninna";
  src: url("../fonts/Ninna-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FreightDisp Pro";
  src: url("../fonts/FreightDispPro-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FreightDisp Pro";
  src: url("../fonts/FreightDispPro-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Apercu";
  src: url("../fonts/Apercu-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apercu";
  src: url("../fonts/Apercu-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apercu";
  src: url("../fonts/Apercu-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — Base palette (five colors; never invent new hues) — */
  --mal-forest: #222F26;        /* deep forest green — the anchor, near-black */
  --mal-olive:  #536734;        /* olive green — labels, secondary accents */
  --mal-rose:   #DE90A3;        /* dusty rose — display/decorative only */
  --mal-peach:  #F7C7B3;        /* soft peach — accent; wordmark on green */
  --mal-cream:  #EFE5D5;        /* warm cream/ivory — the field */

  /* — Derived tints & shades (stay in family) — */
  --mal-cream-bright: #F7F1E7;  /* paper — lighter panel on cream */
  --mal-forest-deep:  #1A241D;  /* hover/pressed state of forest */
  --mal-olive-soft:   #6E7B57;  /* muted olive for quiet text on cream */
  --mal-rose-deep:    #C9758A;  /* rose hover */
  --mal-rose-text:    #A05468;  /* deep text-rose — eyebrows/small text on cream (AA at 13px) */

  /* — Semantic: surfaces — */
  --surface-page:    var(--mal-cream);
  --surface-panel:   var(--mal-cream-bright);
  --surface-inverse: var(--mal-forest);

  /* — Semantic: text — */
  --text-heading:    var(--mal-forest);
  --text-muted:      var(--mal-olive-soft);
  --text-label:      var(--mal-olive);
  --text-on-inverse: var(--mal-cream);
  --text-accent-on-inverse: var(--mal-peach);

  /* — Semantic: accents & interaction — */
  --accent-rose:  var(--mal-rose);
  --accent-peach: var(--mal-peach);
  --action-primary:        var(--mal-forest);
  --action-primary-hover:  var(--mal-forest-deep);
  --action-on-primary:     var(--mal-cream);

  /* — Hairlines — */
  --line:            rgba(34, 47, 38, 0.24);
  --line-strong:     rgba(34, 47, 38, 0.55);
  --line-on-inverse: rgba(239, 229, 213, 0.32);

  /* — Families — */
  --font-display: "Ninna", Georgia, serif;
  --font-title:   var(--font-display);
  --font-body:    "FreightDisp Pro", Georgia, serif;
  --font-sans:    "Apercu", "Helvetica Neue", sans-serif;

  /* — Scale (recalibrated July 2026 — desktop) — */
  --text-poster-xl:  136px;  /* page H1s, POV poster */
  --text-poster:     112px;  /* pull-quote posters, closing CTA links */
  --text-display-xl: 88px;   /* homepage hero, secondary pull quotes */
  --text-display-lg: 64px;   /* chapter / section headlines */
  --text-display-md: 44px;   /* service entries, big numerals */
  --text-title:      30px;   /* card / entry titles, pillar heads */
  --text-strapline:  24px;   /* italic page straplines (body face, line-height 1.5) */
  --text-body-lg:    21px;   /* ledes, intro paragraphs */
  --text-body:       18px;   /* running text */
  --text-body-sm:    16px;   /* secondary text, footer */

  /* — Mobile scale (locked July 2026 — one token per rung) — */
  --text-m-h1-xl:     70px;
  --text-m-h1:        60px;
  --text-m-h1-sm:     56px;
  --text-m-poster:    44px;
  --text-m-bte:       42px;
  --text-m-hero:      40px;
  --text-m-pull:      38px;
  --text-m-cta:       36px;
  --text-m-display:   30px;
  --text-m-entry:     26px;
  --text-m-title:     24px;
  --text-m-strapline: 20px;
  --text-caption:    13px;
  --text-eyebrow:    13px;

  /* — Leading — */
  --leading-display: 1.16;  /* clears Ninna's ascenders & swashes; never below 1.15 */
  --leading-title:   1.25;
  --leading-body:    1.65;

  /* — Tracking — */
  --tracking-display: 0;
  --tracking-caps:      0.18em;
  --tracking-caps-wide: 0.26em;

  /* — Weights — */
  --weight-display: 400;   /* Ninna has one weight; never bold it */
  --weight-title:   400;
  --weight-body:    400;   /* Book; use italic, not weight, for emphasis */
  --weight-caps-light:   300;
  --weight-caps-regular: 400;
  --weight-caps:         500;

  /* — Spacing scale — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* — Editorial rhythm (three steps, no one-off values) — */
  --gap-tight:    56px;   /* elements within one moment */
  --gap-medium:   140px;  /* related moments in a chapter */
  --gap-generous: 200px;  /* between chapters */
  --gap-m:        112px;  /* mobile section rhythm */

  /* — Layout — */
  --container: 1520px;
  --measure-body: 62ch;
  --page-gutter: var(--space-8);

  /* — Radii / borders / shadow — */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--line);
  --border-hairline-inverse: 1px solid var(--line-on-inverse);
  --shadow-lift: 0 16px 40px rgba(26, 36, 29, 0.16);
}