/* ═══════════════════════════════════════════════════════════════
   MINERALI  ·  v6.5 · nocturnal  ·  house style
   Single source of truth for all design tokens, themes, base
   element styles, and the .mn-* primitive classes.
   Graphite is the default ground. No gradients. No blurs. No bounce.
   v6.1 — calmer: headings set by optical size, Literata as the
   default body face, AA contrast on every text token, 11px floor.
   v6.2 — clear body: reading copy in primary text, optical size
   follows the type size, weight lighter on graphite than cream.
   v6.3 — card primitives: caps Fraunces card head, 15px card body.
   v6.4 — compact density for reports; report.css + Report.html.
   v6.5 — bold holds at 600 over the light body weight.
   ═══════════════════════════════════════════════════════════════ */

/* Fonts — Google Fonts CDN. Fraunces (display), Literata (body / reading),
   JetBrains Mono (UI / mono), Noto Serif TC (CJK for Living Archive). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Literata:ital,opsz,wght@0,7..72,300..600;1,7..72,300..600&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Noto+Serif+TC:wght@300;400;500;600&display=swap');

:root {
  /* Design-system identity — the single canonical version string.
     Reference var(--ds-version) anywhere a build/spec label is shown. */
  --ds-version: "6.5"; /* @kind other */

  /* ─────────────────────────────────────────────────────────────
     COLOR — ink ground, paper text, two warm signals + one cut
     These raw tokens are theme-independent. Per-theme grounds are
     set under [data-theme="…"] below; :root defaults to graphite.
     ───────────────────────────────────────────────────────────── */

  /* Ground (deep → elevated) — used directly by terminals/cards */
  --mn-ink:      #07080a;   /* deepest ground (dark theme) */
  --mn-ink-2:    #0d0e11;   /* elevated: terminals, cards */
  --mn-ink-3:    #111317;   /* modals */
  --mn-hairline: #1c1e22;   /* 1px rule — the only divider */

  /* Paper (text on dark) */
  --mn-bone:     #b8ad93;   /* muted paper — secondary text */
  --mn-paper:    #e6ddc8;   /* primary text */
  --mn-chalk:    #f4ecd9;   /* emphatic paper */

  /* Warm signals */
  --mn-oxblood:  #3a0f10;   /* deep warm fill */
  --mn-rust:     #c75a2a;   /* primary signal — links, accents */

  /* The cut — use <=15% of any surface. A cut, not a fill. */
  --mn-acid:     #2be0c8;

  /* Muted ancillaries for state */
  --mn-muted:    #6f675a;
  --mn-smoke:    #3b3a37;

  /* ─────────────────────────────────────────────────────────────
     TYPE
     ───────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;        /* @kind font */
  --font-body:    'Literata', Georgia, serif;        /* @kind font */ /* bookish reading serif, paired with Fraunces display */
  --font-ui:      'JetBrains Mono', ui-monospace, monospace; /* @kind font */ /* UI chrome is mono caps */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* @kind font */
  --font-chinese: 'Noto Serif TC', serif; /* @kind font */

  /* Type scale (rem, against 16px root) */
  --text-2xs:  0.6875rem; /* 11px — mono caps labels only; the floor */
  --text-xs:   0.75rem;   /* 12px — legal, footnotes */
  --text-sm:   0.875rem;  /* 14px — captions, labels */
  --text-card: 0.9375rem; /* 15px — card body under .mn-card-head */
  --text-base: 1.125rem;  /* 18px — UI text */
  --text-body: 1.25rem;   /* 20px — primary reading size */
  --text-lg:   1.5rem;    /* 24px — lead paragraphs */
  --text-xl:   1.75rem;   /* 28px — subheadings */
  --text-2xl:  2.25rem;   /* 36px — section titles */
  --text-3xl:  3rem;      /* 48px — page titles */
  --text-4xl:  4rem;      /* 64px — hero headlines */
  --text-5xl:  5.5rem;    /* 88px — display */

  /* Line heights */
  --leading-tight:   0.86;  /* Fraunces display wonk */
  --leading-heading: 1.1;   /* h1 */
  --leading-snug:    1.2;   /* Headlines */
  --leading-normal:  1.5;   /* UI text */
  --leading-relaxed: 1.6;   /* Body prose */

  /* Letter spacing */
  --tracking-tight:   -0.04em;  /* display hero only */
  --tracking-heading: -0.02em;  /* h1, h2 */
  --tracking-snug:    -0.01em;  /* h3, pull quotes */
  --tracking-body:    -0.01em;
  --tracking-caps:   0.14em; /* mono caps — buttons, slugs */

  /* ─────────────────────────────────────────────────────────────
     RHYTHM — 8px base, 4px half-step for tight chrome. No odd values.
     ───────────────────────────────────────────────────────────── */
  --mn-u:    8px;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-8:  3rem;     /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */

  /* ─────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────── */
  --width-prose: 38rem;  /* 608px — article body */
  --width-wide:  52rem;  /* 832px — wide content */
  --width-full:  80rem;  /* 1280px — max container */

  /* ─────────────────────────────────────────────────────────────
     MOTION — fast or none.
     ───────────────────────────────────────────────────────────── */
  --transition-fast: 120ms linear;                        /* @kind other */
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --transition-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */

  /* ─────────────────────────────────────────────────────────────
     EFFECTS — square & flat. Hairlines, not shadows.
     ───────────────────────────────────────────────────────────── */
  --border-radius-sm: 0;
  --border-radius:    0;
  --border-radius-lg: 2px;  /* the only concession — large containers */

  /* Shadows reserved for modals/popovers only; everything at rest
     uses a 1px --mn-hairline border instead. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   THEMES — graphite (default) · cream (daylight)
   Each maps the generic semantic aliases so token-driven surfaces
   resolve without referencing raw scale values.
   ═══════════════════════════════════════════════════════════════ */

/* GRAPHITE — the default. Lifted enough to read, dark enough to feel nocturnal. */
:root,
[data-theme="graphite"] {
  --bg-primary:     #1a1a1d;
  --bg-deep:        #141417;
  --bg-elevated:    #202024;
  --text-primary:   var(--mn-paper);   /* 12.9:1 */
  --text-secondary: var(--mn-bone);    /*  7.8:1 */
  --text-muted:     #90887c;           /*  5.0:1 — AA at caption sizes */
  --border-color:   #2e2e33;

  --accent:      var(--mn-rust);  /* warm signal: fills, rules, drop caps (large) */
  --accent-cut:  var(--mn-acid);  /* the cut: active state, prompt glyph, one word */
  --accent-text: #d56b35;         /* rust lifted to 5.0:1 for links and emphasis */

  --success: var(--mn-acid);
  --warning: var(--accent-text);
  --error:   #e0675a;

  --body-weight:   300;   /* light on dark blooms; a thin stroke reads crisp */
  --body-tracking: 0;
}

/* CREAM — daylight reading. The variant, never the default. */
[data-theme="cream"],
[data-theme="light"] {
  --bg-primary:     #f3f0ea;
  --bg-deep:        #fbf9f5;
  --bg-elevated:    #f8f6f1;
  --text-primary:   #2a2620;   /* 13.2:1 */
  --text-secondary: #5c5447;   /*  6.6:1 */
  --text-muted:     #736b5d;   /*  4.6:1 — AA at caption sizes */
  --border-color:   #d0c8bb;

  --accent:      #a8431d;   /* rust deepened for contrast on paper (5.3:1) */
  --accent-cut:  #0f7a67;   /* acid deepened for contrast on paper (4.6:1) */
  --accent-text: #a8431d;

  --success: #0f7a67;
  --warning: #a8431d;
  --error:   #b3402b;

  --body-weight:   400;   /* dark on light never goes below regular */
  --body-tracking: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY — compact, for reports, run receipts, diagnostics,
   review pages. Same faces, colors, and spacing scale; the type
   steps come down one notch and body goes to regular weight, since
   a light stroke at 15px reads thin on graphite. Set it on <html>
   beside the theme: <html data-theme="graphite" data-density="compact">.
   Long-form reading keeps the default density.
   ═══════════════════════════════════════════════════════════════ */
[data-density="compact"] {
  --text-base: 0.9375rem;  /* 15px — body, same as --text-card */
  --text-body: 1rem;       /* 16px — .prose inside a report */
  --text-lg:   1.25rem;    /* 20px — section heads */
  --text-xl:   1.375rem;   /* 22px — h3 */
  --text-2xl:  1.75rem;    /* 28px — h2 */
  --text-3xl:  2.25rem;    /* 36px — h1 */
  --leading-relaxed: 1.55;
  --body-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   BASE ELEMENT STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Sentences read in Literata; chrome speaks in mono. Operator
   surfaces put .mn-chrome (or font-family: var(--font-ui)) on the
   app shell to make mono the default inside it. */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

button, input, select, textarea, label, nav, th, kbd, samp, pre {
  font-family: var(--font-ui);
}

/* Bold is a fixed 600: `bolder` over the light body weight only reaches 400.
   Zero specificity, so any component rule wins. Headings already sit at 700+,
   so bold inside them stays relative instead of dropping to 600. */
:where(b, strong) { font-weight: 600; }
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, h6, .display) :where(b, strong) { font-weight: bolder; }

/* Headings follow their optical size; the opsz-144 wonk cut and
   -0.04em tracking belong to the display hero alone. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 700;
  font-style: normal;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--text-3xl); line-height: var(--leading-heading); }
h2, .h2 { font-size: var(--text-2xl); }
h3, .h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  font-style: italic;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.display em { color: var(--accent-cut); font-style: italic; }

.prose,
.body-text {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: var(--body-weight);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--body-tracking);
  color: var(--text-primary);
}
/* One emphasis channel: em is color, strong is weight. Never both. */
.prose em,
.body-text em   { font-style: normal; color: var(--accent-text); }
.prose strong,
.body-text strong { font-weight: 600; color: var(--text-primary); }

.lead {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: var(--body-weight);
  font-style: normal;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.ui-label,
.meta {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

code, .code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.9em;
  color: var(--text-primary);
  background: var(--bg-elevated);
  padding: 0.15em 0.4em;
  border: 1px solid var(--border-color);
}

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--transition-fast);
}
a:hover { text-decoration-color: var(--accent); }

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  font-style: normal;
  color: var(--text-secondary);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: var(--space-8) 0;
}

/* Drop cap — hallmark long-form treatment. Rust, display face. */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'WONK' 1;
  font-size: 4.5em;
  float: left;
  line-height: 0.78;
  padding: 0.05em 0.12em 0 0;
  color: var(--accent);
  font-weight: 900;
  font-style: normal;
}

::selection { background: var(--accent-cut); color: var(--mn-ink); }

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

/* ═══════════════════════════════════════════════════════════════
   PRIMITIVE CLASSES — the .mn-* layer
   ═══════════════════════════════════════════════════════════════ */

/* Slug / kicker — mono caps, the system's voice. Theme-aware.
   Quiet text; the acid lives only in the .glyph. */
.mn-slug {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.mn-slug .right { color: var(--text-muted); }
.mn-slug .glyph { color: var(--accent-cut); }

/* Hairline — 1px. The knife is paper; the rule is hairline. */
.mn-knife    { height: 1px; background: var(--text-primary); }
.mn-hairline { height: 1px; background: var(--border-color); }

/* Display — Fraunces opsz 144 wonk */
.mn-display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  font-weight: 900;
  font-style: italic;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin: 0;
}
.mn-display em { color: var(--accent-cut); font-style: italic; }

/* Tag — inline metadata, the voice's side-channel */
.mn-tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  vertical-align: 2px;
}
.mn-tag.acid  { color: var(--accent-cut); }
.mn-tag.rust  { color: var(--accent-text); }
.mn-tag.paper { color: var(--text-primary); }
.mn-tag.bone  { color: var(--text-secondary); }

/* Card — dense operator item: a mono ref, a caps Fraunces head, a
   15px body. The one place Fraunces goes uppercase; 600 and +0.02em
   keep the caps firm without shouting. */
.mn-card {
  border: 1px solid var(--border-color);
  background: var(--bg-deep);
  padding: var(--space-4);
}
.mn-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.mn-card-head {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
}
.mn-card-head code { text-transform: none; letter-spacing: 0; }
.mn-card-body {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-card);
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}
/* Ref — filled mono index chip (I8, Q2) that opens a card header. */
.mn-ref {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--bg-primary);
  background: var(--text-secondary);
  padding: 1px var(--space-2);
}

/* Button — square, 1px, inverts on hover. At most one .acid per surface. */
.mn-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-fast);
  border-radius: 0;
}
.mn-btn:hover { background: var(--text-primary); color: var(--bg-primary); }
.mn-btn.acid  { background: var(--accent-cut); color: var(--bg-primary); border-color: var(--accent-cut); }
.mn-btn.acid:hover { background: var(--bg-primary); color: var(--accent-cut); }
.mn-btn.ghost { color: var(--text-secondary); border-color: var(--border-color); }
.mn-btn.ghost:hover { color: var(--text-primary); border-color: var(--text-primary); background: transparent; }
.mn-btn.danger { color: var(--error); }
.mn-btn.danger:hover { background: var(--error); color: var(--bg-primary); border-color: var(--error); }

/* Mono number — tabular, never centred */
.mn-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Operator shell — mono becomes the default voice inside it. */
.mn-chrome { font-family: var(--font-ui); font-weight: 400; }

/* Fast or none: honour reduced motion everywhere tokens are used. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
    --transition-slow: 0ms linear;
  }
}