/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY — Danbi

   Mono-forward, by design. This is a terminal-adjacent developer tool: IBM Plex
   Mono is the default voice for data, labels, the ledger, logs and the CLI.
   Space Grotesk handles display — big, structural, frequently uppercase with
   wide tracking, like architectural drafting labels. IBM Plex Sans carries the
   occasional run of reading prose.

   Scale is a slightly-tightened modular scale; the brutalist "calm" comes from
   negative space (see spacing.css), not from soft, oversized type.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Families ──────────────────────────────────────────────────────────── */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* humanist default (moonjar); hanji/meok restore Space Grotesk */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Size ramp ─────────────────────────────────────────────────────────── */
  --text-2xs:  0.6875rem;  /* 11px — micro mono labels, gate stage names        */
  --text-xs:   0.75rem;    /* 12px — captions, meta, kbd                          */
  --text-sm:   0.8125rem;  /* 13px — dense UI, ledger rows, secondary            */
  --text-base: 0.9375rem;  /* 15px — body default (matches the app)              */
  --text-md:   1.0625rem;  /* 17px — lead paragraph                              */
  --text-lg:   1.375rem;   /* 22px — card titles                                 */
  --text-xl:   1.875rem;   /* 30px — section headings                            */
  --text-2xl:  2.5rem;     /* 40px — page titles                                 */
  --text-3xl:  3.5rem;     /* 56px — display                                     */
  --text-4xl:  5rem;       /* 80px — hero / brutalist display                    */

  /* ── Weight ────────────────────────────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ── Leading ───────────────────────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Tracking ──────────────────────────────────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* uppercase mono labels — the signature treatment */
  --tracking-widest:  0.22em;   /* kickers, monolith spacing                       */

  /* ── Semantic roles ────────────────────────────────────────────────────── */
  /* Display: Space Grotesk, tight tracking, tight leading */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-medium);
  --display-leading: var(--leading-tight);
  --display-track:   var(--tracking-tight);

  /* Kicker / eyebrow: quiet mono, gently tracked (the moonjar default voice) */
  --kicker-font:      var(--font-mono);
  --kicker-size:      var(--text-2xs);
  --kicker-weight:    var(--weight-medium);
  --kicker-track:     0.04em;
  --kicker-transform: none;  /* @kind other */

  /* Label: sentence-case mono, quiet and light. Transform / track / weight are
     tokens so the brutalist themes can restore the uppercase wide-tracked
     treatment without a universal `!important` selector. */
  --label-font:      var(--font-mono);
  --label-size:      var(--text-2xs);
  --label-weight:    var(--weight-regular);
  --label-weight-strong: var(--weight-regular);   /* panel titles, section heads */
  --label-track:     0.005em;
  --label-transform: none;  /* @kind other */

  /* Control text (buttons) — brutalist themes restore the larger size */
  --btn-size: var(--text-xs);

  /* Body prose */
  --body-font:    var(--font-sans);
  --body-size:    var(--text-base);
  --body-leading: var(--leading-relaxed);

  /* Data / code / ledger */
  --data-font:    var(--font-mono);
  --data-size:    var(--text-sm);
  --data-leading: var(--leading-normal);
}

/* ── Per-theme FONT + label-voice overrides ────────────────────────────────
   Each theme bundles its own type. Only FAMILY and label-voice tokens are
   reassigned (recombined from the same three loaded families in fonts.css — no
   new assets); the semantic roles reference these tokens, so this re-faces the
   whole UI with no component changes. Moonjar is the :root default voice.     */

/* High contrast: sans-forward. Drop the grotesque display for IBM Plex Sans so
   headings read at maximum legibility; data/labels stay mono. */
[data-theme='contrast'] {
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

/* Terminal: mono everything — display and body collapse onto IBM Plex Mono for
   a pure terminal voice. NOTE: mono runs ~15% wider than Space Grotesk at
   display sizes; check big headings for wrap when targeting this theme. */
[data-theme='terminal'] {
  --font-display: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}


/* The brutalist voice — the heritage register (pre-Danbi) — is opt-in: hanji,
   meok and the utility themes keep the uppercase wide-tracked mono labels and
   the larger control text. */
[data-theme='hanji'],
[data-theme='meok'],
[data-theme='dark'],
[data-theme='terminal'],
[data-theme='contrast'] {
  --kicker-track:     var(--tracking-widest);
  --kicker-transform: uppercase;  /* @kind other */
  --label-size:       var(--text-xs);
  --label-weight:     var(--weight-medium);
  --label-weight-strong: var(--weight-semibold);
  --label-track:      var(--tracking-wider);
  --label-transform:  uppercase;  /* @kind other */
  --btn-size:         var(--text-sm);
}

/* Moonjar pin — restores the default voice when a host applies a dark/brutalist
   theme higher up (e.g. the card viewer in app dark mode). */
[data-theme='moonjar'] {
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --kicker-track:     0.04em;
  --kicker-transform: none;  /* @kind other */
  --label-size:       var(--text-2xs);
  --label-weight:     var(--weight-regular);
  --label-weight-strong: var(--weight-regular);
  --label-track:      0.005em;
  --label-transform:  none;  /* @kind other */
  --btn-size:         var(--text-xs);
}

/* Hanji + Meok keep the architectural grotesque display. */
[data-theme='hanji'],
[data-theme='meok'],
[data-theme='dark'] {
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
}

/* Jegi: friendly and rounded. Humanist IBM Plex Sans everywhere, and the
   shouty uppercase/wide-tracked label treatment is retired via the tokens —
   no `!important`, no universal selector. */
[data-theme='jegi'] {
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --label-transform:  none;  /* @kind other */
  --kicker-transform: none;  /* @kind other */
  --label-track:  var(--tracking-normal);
  --kicker-track: var(--tracking-wide);
}

/* ── Optional helper classes (components mostly read the tokens directly) ──── */
.ha-kicker {
  font-family: var(--kicker-font);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-track);
  text-transform: var(--kicker-transform);
  color: var(--ink-faint);
}
.ha-label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: var(--label-transform);
}
.ha-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-track);
}
.ha-mono { font-family: var(--font-mono); }