/* ============================================================
   MARATHON 360° — tokens.css  (v2 — editorial)
   Single source of truth. Screen + print.
   Every downstream artefact inherits these.
   ------------------------------------------------------------
   Immutable (§8 Durability Contract):
     ink #0B0B0A · cream #F4EFE6 · antique gold #B08A3E · danger #7A1F1A
     transitional serif display · humanist serif body · grotesque mono labels
     12-col asymmetric grid · hairline rules as structure
   ============================================================ */

/* Humanist serif for body, grotesque mono for labels.
   Display: Source Serif 4 Subhead (serves as transitional substitute
   until GT Sectra / Freight is licensed). */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Immutable palette (do not add colours) ---------- */
  --ink:         #0B0B0A;   /* ink black   — type on cream, bg on dark  */
  --cream:       #F4EFE6;   /* cream paper — page, reversed fg          */
  --gold:        #B08A3E;   /* antique gold — accent, flat, never       */
  --danger:      #7A1F1A;   /* reserved: AML / legal warnings only      */

  /* Neutrals derived from ink @ alpha (for rules, captions, focus) */
  --ink-90:      rgba(11,11,10,0.92);
  --ink-70:      rgba(11,11,10,0.72);
  --ink-55:      rgba(11,11,10,0.55);
  --ink-40:      rgba(11,11,10,0.40);
  --ink-25:      rgba(11,11,10,0.25);
  --ink-12:      rgba(11,11,10,0.12);   /* hairline on cream */
  --ink-06:      rgba(11,11,10,0.06);

  --cream-90:    rgba(244,239,230,0.92);
  --cream-70:    rgba(244,239,230,0.72);
  --cream-55:    rgba(244,239,230,0.55);
  --cream-40:    rgba(244,239,230,0.40);
  --cream-12:    rgba(244,239,230,0.12);

  /* ---------- Semantic ---------- */
  --bg:          var(--cream);
  --bg-reverse:  var(--ink);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-70);
  --fg-faint:    var(--ink-40);
  --rule:        var(--ink-12);     /* the hairline rule everywhere */
  --rule-strong: var(--ink-40);
  --accent:      var(--gold);

  /* On reverse (ink background, cream type) */
  --on-reverse-fg:        var(--cream);
  --on-reverse-fg-muted:  var(--cream-70);
  --on-reverse-fg-faint:  var(--cream-40);
  --on-reverse-rule:      var(--cream-12);

  /* ---------- Typography (mandatory stack) ---------- */
  /*
    Display & headlines — transitional serif.
      Preferred:  'GT Sectra', 'Freight Display Pro'   (requires licence)
      Shipped:    'Source Serif 4'                     (open, wide opsz)
      Fallback:   Georgia, serif
    Body — humanist serif.
      Source Serif 4 doubles as body (Adobe designed it for both roles).
    Mono — grotesque mono.
      Preferred:  'JetBrains Mono'
      Shipped:    'IBM Plex Mono'
  */
  --font-display: 'GT Sectra Display', 'Freight Display Pro', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Web type scale (screen) */
  --text-micro:  11px;    /* mono, labels, folios, captions */
  --text-caption: 13px;
  --text-body:   17px;    /* body — 17/28 as specified */
  --text-lede:   19px;
  --text-h5:     22px;
  --text-h4:     28px;
  --text-h3:     36px;
  --text-h2:     52px;
  --text-h1:     72px;
  --text-masthead: 112px;

  --lh-body:     1.65;    /* ≈ 28/17 */
  --lh-display:  1.04;    /* tight headline */
  --lh-sub:      1.22;

  --ls-display:  -0.015em;
  --ls-label:    0.14em;  /* mono all-caps labels */
  --ls-mono:     0.06em;  /* mono inline */

  /* Print scale (mm / pt). Used under @media print and inside .sheet. */
  --print-body-size:    10.5pt;
  --print-body-leading: 15pt;
  --print-caption:      8.5pt;
  --print-label:        8pt;
  --print-h4:           16pt;
  --print-h3:           22pt;
  --print-h2:           32pt;
  --print-h1:           46pt;
  --print-masthead:     64pt;

  /* ---------- Grid & layout ---------- */
  --grid-cols:           12;
  --grid-gutter:         24px;     /* web */
  --grid-gutter-print:   6mm;
  --page-margin:         96px;     /* web desktop */
  --page-margin-tablet:  48px;
  --page-margin-mobile:  24px;
  --page-margin-print:   17mm;
  --content-max:         1440px;

  /* ---------- Rule weights ---------- */
  --rule-w:       1px;       /* web */
  --rule-w-print: 0.5pt;

  /* ---------- Motion (minimal) ---------- */
  --t-underline: 160ms ease-out;
  --t-hover:     180ms ease-out;

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

/* ============================================================
   PRIMITIVES — intentionally thin. Every template composes these.
   ============================================================ */

.m-page {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum" 1;   /* old-style figures in body */
}
.m-page.m-page--reverse { background: var(--bg-reverse); color: var(--on-reverse-fg); }

.m-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gutter);
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--page-margin);
}
@media (max-width: 900px) { .m-grid { padding-inline: var(--page-margin-mobile); column-gap: 16px; } }

/* Headline — transitional serif, tight, display opsz */
.m-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 60;      /* Source Serif 4: display cut */
  color: var(--fg);
}
.m-display--h1 { font-size: var(--text-h1); }
.m-display--h2 { font-size: var(--text-h2); }
.m-display--h3 { font-size: var(--text-h3); font-variation-settings: "opsz" 40; }
.m-display--h4 { font-size: var(--text-h4); font-variation-settings: "opsz" 24; }

/* Body */
.m-body  { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); }
.m-lede  { font-family: var(--font-body); font-size: var(--text-lede); line-height: 1.5; font-style: italic; color: var(--fg-muted); }
.m-caption { font-size: var(--text-caption); line-height: 1.45; color: var(--fg-muted); }

/* Mono label — grotesque, all caps, tracked */
.m-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg);
  font-feature-settings: "tnum";
}
.m-label--gold { color: var(--gold); }
.m-label--muted { color: var(--fg-faint); }

/* Numerals — tabular, serif display */
.m-num {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1, "lnum" 1;   /* tabular lining */
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Hairline rule — structural */
.m-rule          { border: 0; border-top: var(--rule-w) solid var(--rule); margin: 0; }
.m-rule--strong  { border-top-color: var(--rule-strong); }
.m-rule--v       { border: 0; border-left: var(--rule-w) solid var(--rule); width: 0; }

/* Drop cap — first paragraph, editorial lead only */
.m-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 5.4em;
  line-height: 0.82;
  float: left;
  padding: 6px 14px 0 0;
  margin-left: -6px;
  color: var(--fg);
  font-variation-settings: "opsz" 60;
}

/* Links — underline is the interaction.  0.5px → 1px on hover (web only) */
.m-link, .m-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-underline);
}
.m-link:hover, .m-body a:hover { text-decoration-thickness: 1px; }

/* The one exception: a hairline-bordered mono-caps rectangle CTA */
.m-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: var(--rule-w) solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
}
.m-cta:hover { background: var(--fg); color: var(--bg); }
.m-page--reverse .m-cta { border-color: var(--on-reverse-fg); color: var(--on-reverse-fg); }
.m-page--reverse .m-cta:hover { background: var(--on-reverse-fg); color: var(--bg-reverse); }

/* Focus — 2px antique gold outline (never default ring) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================================
   PRINT OVERRIDES — every template opts in by adding .m-sheet
   ============================================================ */
@media print {
  @page { size: A4; margin: 0; }
  body { background: var(--cream); color: var(--ink); margin: 0; }
}

.m-sheet {
  width: 210mm; min-height: 297mm;
  background: var(--cream); color: var(--ink);
  padding: var(--page-margin-print);
  box-sizing: border-box;
  font-size: var(--print-body-size);
  line-height: var(--print-body-leading);
  position: relative;
}
.m-sheet .m-display--h1 { font-size: var(--print-h1); }
.m-sheet .m-display--h2 { font-size: var(--print-h2); }
.m-sheet .m-display--h3 { font-size: var(--print-h3); }
.m-sheet .m-display--h4 { font-size: var(--print-h4); }
.m-sheet .m-label   { font-size: var(--print-label); }
.m-sheet .m-caption { font-size: var(--print-caption); }
.m-sheet .m-rule    { border-top-width: var(--rule-w-print); }