/* MonoPaper — Colors & Type
 * Newspaper + typewriter + IDE. All monospace, all the time.
 * Monaspace superfamily by GitHub Next / Lettermatic (SIL OFL).
 */

/* ─── Webfonts ────────────────────────────────────────────────── */

@font-face {
  font-family: "Monaspace Neon";
  src: url("fonts/MonaspaceNeon-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Argon";
  src: url("fonts/MonaspaceArgon-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Xenon";
  src: url("fonts/MonaspaceXenon-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Radon";
  src: url("fonts/MonaspaceRadon-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Krypton";
  src: url("fonts/MonaspaceKrypton-Var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-style: oblique -11deg 0deg;
  font-display: swap;
}

/* ─── Tokens ──────────────────────────────────────────────────── */

:root {
  /* Type families. Each cut has a role. */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;     /* sans — masthead, headlines */
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;     /* sans — long-form reading */
  --font-ui:      ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;     /* sans — UI chrome */
  --font-humanist:ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;     /* sans — callouts */
  --font-code:    "Monaspace Krypton", ui-monospace, monospace;   /* mechanical — code blocks, terminal */
  --font-hand:    "Monaspace Radon", ui-monospace, monospace;     /* handwriting — annotations, margins, drafts */

  /* Newsprint paper palette — warm beige neutrals */
  --paper:         #efe7d6;   /* base newsprint, warm beige */
  --paper-warm:    #e6dcc4;   /* aged stock */
  --paper-cool:    #ebe5d4;   /* mid-tone */
  --paper-bright:  #f7f1e1;   /* fresh sheet */

  /* Typewriter ink palette — green-black, like aged iron-gall */
  --ink:           #1d231a;   /* primary ink, sage-shifted black */
  --ink-2:         #2e3527;   /* secondary */
  --ink-3:         #565c46;   /* muted */
  --ink-4:         #7e836a;   /* faint */
  --ink-5:         #adb29a;   /* rule lines, dividers */

  /* Sage / earth — the primary brand motif. Used like printer's inks. */
  --sage-1:        #e3e2cf;   /* lichen wash */
  --sage-2:        #c8ccb0;   /* pale sage */
  --sage-3:        #9ba87f;   /* sage */
  --sage-4:        #6b7a52;   /* moss */
  --sage-5:        #455336;   /* deep forest */
  --sage-6:        #2c3a23;   /* near-black sage */

  --earth-1:       #e7d9c0;   /* parchment */
  --earth-2:       #c9a984;   /* tan */
  --earth-3:       #9a7548;   /* burnt sienna ink */
  --earth-4:       #6e4a26;   /* walnut */
  --earth-5:       #3f2a16;   /* dark oak */

  --clay:          #b86b4a;   /* terra cotta — used for accent ink */
  --rust:          #8a3a1f;   /* rust red */
  --ochre:         #c89a3a;   /* ochre / mustard */

  /* Foreground / background semantic */
  --bg:    var(--paper);
  --bg-2:  var(--paper-warm);
  --bg-3:  var(--paper-bright);
  --fg:    var(--ink);
  --fg-2:  var(--ink-2);
  --fg-3:  var(--ink-3);
  --fg-4:  var(--ink-4);
  --rule:  var(--ink-5);

  /* Editor / IDE accents — printer's inks, sage-and-earth weighted */
  --syn-keyword: var(--sage-5);   /* deep forest — keywords, masthead accent */
  --syn-string:  var(--sage-4);   /* moss — strings, success */
  --syn-number:  var(--earth-3);  /* burnt sienna — numbers, warnings */
  --syn-comment: var(--ink-4);    /* faded ink */
  --syn-fn:      #2a4a4b;         /* deep teal — links, function names */
  --syn-marker:  var(--ochre);    /* highlighter ochre */

  /* Semantic */
  --accent:        var(--sage-5);
  --accent-soft:   var(--sage-2);
  --link:          var(--syn-fn);
  --link-hover:    var(--ink);
  --success:       var(--sage-4);
  --warning:       var(--earth-3);
  --danger:        var(--rust);
  --highlight:     #e8d68a;       /* marker pen, ochre-leaning */
  --selection-bg:  var(--sage-5);
  --selection-fg:  var(--paper-bright);

  /* Spacing — typewriter line feed scale, in em-ish units */
  --sp-0:  2px;
  --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;

  /* Borders — newsprint hairlines, no rounding */
  --bd:        1px solid var(--rule);
  --bd-strong: 1px solid var(--ink);
  --bd-double: 3px double var(--ink);
  --bd-dotted: 1px dotted var(--ink-3);
  --bd-thick:  2px solid var(--ink);
  --radius:    0px;          /* hard corners by default */
  --radius-sm: 0px;
  --radius-soft: 2px;        /* the only allowed softening, for buttons */

  /* Shadows — paper drop, never glow */
  --sh-0: none;
  --sh-1: 0 1px 0 0 rgba(26,24,20,0.08);
  --sh-2: 1px 2px 0 0 rgba(26,24,20,0.10);
  --sh-press: inset 1px 1px 0 0 rgba(26,24,20,0.18);

  /* Type scale — inherits ratio of 1.25 (typewriter conservative) */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  84px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Texture healing + ligatures — the Monaspace special sauce */
  --feat-default: "calt", "liga", "ss01", "ss02", "ss03";
  --feat-code:    "calt", "liga", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10";
  --feat-display: "calt", "ss02";
}

/* ─── Element defaults ───────────────────────────────────────── */

html { background: var(--bg); color: var(--fg); }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  font-feature-settings: var(--feat-default);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  font-feature-settings: var(--feat-display);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: 0;
}

h1 { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); font-weight: 700; }
h3 { font-size: var(--t-xl);  font-weight: 700; }
h4 { font-size: var(--t-lg);  font-weight: 600; }
h5 { font-size: var(--t-md);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
h6 { font-size: var(--t-sm);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }

p { margin: 0 0 var(--sp-4) 0; max-width: 68ch; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-code);
  font-feature-settings: var(--feat-code);
  font-size: 0.95em;
}
code {
  background: var(--bg-2);
  padding: 0.05em 0.35em;
  border: var(--bd);
}
pre {
  background: var(--ink);
  color: var(--paper-bright);
  padding: var(--sp-4);
  overflow-x: auto;
  border-left: 3px solid var(--syn-keyword);
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; }

kbd {
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
  box-shadow: var(--sh-1);
}

mark { background: var(--highlight); color: var(--ink); padding: 0 0.15em; }

hr { border: 0; border-top: var(--bd-double); margin: var(--sp-6) 0; }

blockquote {
  border-left: 3px solid var(--ink);
  margin: var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-humanist);
  font-style: italic;
  color: var(--fg-2);
}

/* Newspaper / typewriter affordances */
.masthead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-5xl);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: none;
}
.dateline {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--syn-keyword);
}
.byline {
  font-family: var(--font-humanist);
  font-style: italic;
  color: var(--fg-3);
  font-size: var(--t-sm);
}
.handwritten {
  font-family: var(--font-hand);
  font-style: oblique -6deg;
  color: var(--syn-fn);
}

/* Caret — typewriter blinking cursor */
@keyframes mp-caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.caret::after {
  content: "█";
  display: inline-block;
  margin-left: 0.05em;
  animation: mp-caret 1s steps(1) infinite;
  color: var(--ink);
  vertical-align: baseline;
}