/* ═══════════════════════════════════════════════════════════════════════
   ▎ MY-Type · Typography · v1.2 · BACKBONE
   ▎
   ▎ A typographic system in three voices, designed to be the foundation
   ▎ for future builds. This file contains nothing but type:
   ▎
   ▎   §1   Fonts            — @font-face declarations
   ▎   §2   Tokens           — :root variables (families, palette, scale)
   ▎   §3   Element defaults — h1—h6, p, lists, blockquote, hr, code, a
   ▎   §4   Utility classes  — .t-display, .t-title, … .t-tabular
   ▎   §5   OpenType utils   — .t-smcp, .t-tnum, .t-balance, etc.
   ▎   §6   Inline-mono      — x-height harmonisation in serif prose
   ▎   §7   Measure          — .measure caps a column at ≈ 60—66 ch
   ▎   §8   Print            — basic print fallback
   ▎
   ▎ Three families, each in its own register:
   ▎   • Sans  (iA Writer Quattro) — UI: headings, body, captions
   ▎   • Serif (Newsreader)        — long-form prose only
   ▎   • Mono  (Commit Mono)       — code, data, identifiers
   ▎
   ▎ Three disciplines, after Bringhurst:
   ▎   • Modular scale, base 17px, ratio 1.250 (major third)
   ▎   • 4px baseline grid — every line-height is a whole number of units
   ▎   • OpenType active by default — kern, calt, oldstyle in serif,
   ▎     lining-tabular in mono, slashed-zero on every sans role
   ▎
   ▎ Color is intentionally NOT defined here beyond a neutral grayscale.
   ▎ The five color tokens (paper, ink, muted, rule, tint) are defaults
   ▎ meant to be overridden at :root by the consuming project.
   ▎
   ▎ For ready-made patterns built on top of this backbone (pull quote,
   ▎ footnotes, code block, KPI, status, drop cap, etc.), see patterns.css.
   ═══════════════════════════════════════════════════════════════════════ */


/* §1 ─── FONTS ─────────────────────────────────────────────────────── */

@font-face { font-family: "Sans";  src: url("iAWriterQuattro/iAWriterQuattroV.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Sans";  src: url("iAWriterQuattro/iAWriterQuattroV-Italic.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Serif"; src: url("Newsreader/Newsreader.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Serif"; src: url("Newsreader/Newsreader-Italic.woff2") format("woff2-variations"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Mono";  src: url("CommitMono/CommitMonoVariable.woff2") format("woff2-variations"), url("CommitMono/CommitMonoVariable.ttf") format("truetype-variations"); font-weight: 200 700; font-style: normal; font-display: swap; }
/* Mono italic is upright-only here. Commit Mono ships static italic OTFs
   per weight under CommitMono/; declare your own @font-face if you need it. */


/* §2 ─── ROOT TOKENS ────────────────────────────────────────────────── */

:root {
  /* Family stacks */
  --font-sans:  "Sans",  ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Serif", Charter, Georgia, "Times New Roman", serif;
  --font-mono:  "Mono",  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Color — neutral grayscale defaults. Override per project. */
  --paper:    #ffffff;
  --ink:      #111111;
  --muted:    #777777;
  --rule:     #e6e6e6;
  --tint:     #f5f5f5;

  /* Baseline grid — every line-height is a multiple of this */
  --grid: 4px;

  /* Twelve tokens.  size/line both snap to the grid; weight,
     tracking and family follow the role.                          */
  --t-display-family:    var(--font-sans);  --t-display-size:    52px; --t-display-line:    56px; --t-display-weight:    600; --t-display-tracking:    -0.040em;
  --t-title-family:      var(--font-sans);  --t-title-size:      36px; --t-title-line:      40px; --t-title-weight:      600; --t-title-tracking:      -0.030em;
  --t-heading-family:    var(--font-sans);  --t-heading-size:    28px; --t-heading-line:    36px; --t-heading-weight:    550; --t-heading-tracking:    -0.022em;
  --t-subheading-family: var(--font-sans);  --t-subheading-size: 21px; --t-subheading-line: 28px; --t-subheading-weight: 550; --t-subheading-tracking: -0.014em;
  --t-lede-family:       var(--font-serif); --t-lede-size:       21px; --t-lede-line:       32px; --t-lede-weight:       380; --t-lede-tracking:       -0.003em; --t-lede-style: italic; --t-lede-opsz: 24;
  --t-prose-family:      var(--font-serif); --t-prose-size:      17px; --t-prose-line:      28px; --t-prose-weight:      400; --t-prose-tracking:       0;        --t-prose-opsz: 14;
  --t-body-family:       var(--font-sans);  --t-body-size:       15px; --t-body-line:       24px; --t-body-weight:       450; --t-body-tracking:        0;
  --t-caption-family:    var(--font-sans);  --t-caption-size:    13px; --t-caption-line:    20px; --t-caption-weight:    500; --t-caption-tracking:     0.005em;
  --t-micro-family:      var(--font-mono);  --t-micro-size:      11px; --t-micro-line:      16px; --t-micro-weight:      500; --t-micro-tracking:       0.10em;
  --t-code-family:       var(--font-mono);  --t-code-size:       13px; --t-code-line:       20px; --t-code-weight:       400; --t-code-tracking:        0;
  --t-kbd-family:        var(--font-mono);  --t-kbd-size:        12px; --t-kbd-line:        16px; --t-kbd-weight:        500; --t-kbd-tracking:         0;
  --t-tabular-family:    var(--font-mono);  --t-tabular-size:    13px; --t-tabular-line:    20px; --t-tabular-weight:    450; --t-tabular-tracking:     0;

  /* Inline-mono harmony — applied where mono lives in serif prose. */
  --mono-x-adjust:     0.520;
  --mono-baseline:     0.02em;
  --mono-inline-scale: 1.00;
  --mono-inline-ls:    -0.01em;
}

:root.dark {
  --paper: #0a0a0a;
  --ink:   #f5f5f5;
  --muted: #888888;
  --rule:  #1f1f1f;
  --tint:  #161616;
}


/* §3 ─── ELEMENT DEFAULTS ──────────────────────────────────────────── */

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--t-body-family);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-variation-settings: "wght" var(--t-body-weight);
  letter-spacing: var(--t-body-tracking);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: lining-nums proportional-nums slashed-zero;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-variant-numeric: lining-nums proportional-nums slashed-zero;
  text-wrap: balance;
}
h1 { font-family: var(--t-title-family);      font-size: var(--t-title-size);      line-height: var(--t-title-line);      font-variation-settings: "wght" var(--t-title-weight);      letter-spacing: var(--t-title-tracking); }
h2 { font-family: var(--t-heading-family);    font-size: var(--t-heading-size);    line-height: var(--t-heading-line);    font-variation-settings: "wght" var(--t-heading-weight);    letter-spacing: var(--t-heading-tracking); }
h3 { font-family: var(--t-subheading-family); font-size: var(--t-subheading-size); line-height: var(--t-subheading-line); font-variation-settings: "wght" var(--t-subheading-weight); letter-spacing: var(--t-subheading-tracking); }

p { margin: 0; }

small {
  font: var(--t-caption-weight) var(--t-caption-size)/var(--t-caption-line) var(--t-caption-family);
  letter-spacing: var(--t-caption-tracking);
  color: var(--muted);
}

ul, ol { margin: 0; padding-left: 1.4em; }
ul { list-style: none; padding-left: 0; }
ul.bullets { list-style: disc; padding-left: 1.4em; }
ul.bullets li::marker { color: var(--muted); }

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: "wght" 400, "opsz" 36;
  font-size: 21px;
  line-height: 32px;
  color: var(--ink);
}

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

figure { margin: 24px 0; }
figcaption {
  margin-top: 8px;
  font-family: var(--t-caption-family);
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  font-variation-settings: "wght" var(--t-caption-weight);
  color: var(--muted);
}

table { border-collapse: collapse; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-variation-settings: "wght" var(--t-code-weight);
  font-variant-ligatures: none;
  font-variant-numeric: lining-nums tabular-nums;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
}
a:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

::selection { background: var(--ink); color: var(--paper); }


/* §4 ─── TOKEN UTILITY CLASSES ─────────────────────────────────────── */

.t-display    { font-family: var(--t-display-family);    font-size: var(--t-display-size);    line-height: var(--t-display-line);    font-variation-settings: "wght" var(--t-display-weight);    letter-spacing: var(--t-display-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; text-wrap: balance; }
.t-title      { font-family: var(--t-title-family);      font-size: var(--t-title-size);      line-height: var(--t-title-line);      font-variation-settings: "wght" var(--t-title-weight);      letter-spacing: var(--t-title-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; text-wrap: balance; }
.t-heading    { font-family: var(--t-heading-family);    font-size: var(--t-heading-size);    line-height: var(--t-heading-line);    font-variation-settings: "wght" var(--t-heading-weight);    letter-spacing: var(--t-heading-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; text-wrap: balance; }
.t-subheading { font-family: var(--t-subheading-family); font-size: var(--t-subheading-size); line-height: var(--t-subheading-line); font-variation-settings: "wght" var(--t-subheading-weight); letter-spacing: var(--t-subheading-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; }
.t-lede       { font-family: var(--t-lede-family);       font-size: var(--t-lede-size);       line-height: var(--t-lede-line);       font-variation-settings: "wght" var(--t-lede-weight), "opsz" var(--t-lede-opsz); font-style: var(--t-lede-style); letter-spacing: var(--t-lede-tracking); font-variant-numeric: oldstyle-nums proportional-nums; }
.t-prose      { font-family: var(--t-prose-family);      font-size: var(--t-prose-size);      line-height: var(--t-prose-line);      font-variation-settings: "wght" var(--t-prose-weight), "opsz" var(--t-prose-opsz); letter-spacing: var(--t-prose-tracking); font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first allow-end last; }
.t-body       { font-family: var(--t-body-family);       font-size: var(--t-body-size);       line-height: var(--t-body-line);       font-variation-settings: "wght" var(--t-body-weight);       letter-spacing: var(--t-body-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; }
.t-caption    { font-family: var(--t-caption-family);    font-size: var(--t-caption-size);    line-height: var(--t-caption-line);    font-variation-settings: "wght" var(--t-caption-weight);    letter-spacing: var(--t-caption-tracking); font-variant-numeric: lining-nums proportional-nums slashed-zero; color: var(--muted); }
.t-micro      { font-family: var(--t-micro-family);      font-size: var(--t-micro-size);      line-height: var(--t-micro-line);      font-variation-settings: "wght" var(--t-micro-weight);      letter-spacing: var(--t-micro-tracking); text-transform: uppercase; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.t-code       { font-family: var(--t-code-family);       font-size: var(--t-code-size);       line-height: var(--t-code-line);       font-variation-settings: "wght" var(--t-code-weight);       letter-spacing: var(--t-code-tracking); font-variant-ligatures: none; }
.t-kbd        { font-family: var(--t-kbd-family);        font-size: var(--t-kbd-size);        line-height: var(--t-kbd-line);        font-variation-settings: "wght" var(--t-kbd-weight); padding: 1px 6px; border: 1px solid var(--rule); border-radius: 4px; vertical-align: 0.05em; }
.t-tabular    { font-family: var(--t-tabular-family);    font-size: var(--t-tabular-size);    line-height: var(--t-tabular-line);    font-variation-settings: "wght" var(--t-tabular-weight);    font-variant-numeric: lining-nums tabular-nums; }


/* §5 ─── OPENTYPE FEATURE UTILITIES ────────────────────────────────── */

.t-smcp     { font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
.t-oldstyle { font-variant-numeric: oldstyle-nums proportional-nums; }
.t-lining   { font-variant-numeric: lining-nums proportional-nums; }
.t-tnum     { font-variant-numeric: lining-nums tabular-nums; }
.t-no-ligs  { font-variant-ligatures: none; }
.t-balance  { text-wrap: balance; }
.t-pretty   { text-wrap: pretty; }
.t-hang     { hanging-punctuation: first allow-end last; }
.t-italic   { font-style: italic; }


/* §6 ─── INLINE-MONO HARMONY ───────────────────────────────────────── */

/* When mono lives inside serif prose, font-size-adjust matches its
   x-height to the surrounding face and a small vertical-align nudges
   the baseline. The single most important detail in mixed typography. */
.t-prose code, .t-prose .t-code,
.t-body  code, .t-body  .t-code,
.t-lede  code,
p code, p .t-code, p .mono {
  font-size-adjust: var(--mono-x-adjust);
  vertical-align: var(--mono-baseline);
  font-size: calc(1em * var(--mono-inline-scale));
  font-variation-settings: "wght" calc(var(--t-body-weight) - 50);
  letter-spacing: var(--mono-inline-ls);
  font-variant-ligatures: none;
}


/* §7 ─── MEASURE ───────────────────────────────────────────────────── */

/* Limits a column to ~60—66 characters at .t-prose. Anywhere from 45
   to 75 is acceptable; 66 is the printer's ideal. */
.measure { max-width: 32em; }


/* §8 ─── PRINT ─────────────────────────────────────────────────────── */

@media print {
  body { background: white; color: black; }
  a { color: inherit; text-decoration-color: inherit; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}