/* =============================================================================
   @elements/style — base typography

   IBM Plex Mono is the UI default; Plex Sans is for long-form prose,
   page headings, and form labels. The rule: >150 words of continuous
   reading → Sans. Everything else → Mono.

   Headings (h1–h4) use Plex Sans medium/semibold with tight tracking.
   .display opts into the hero-scale 72px splash headline.
============================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  letter-spacing: var(--tracking-normal);
}

/* ─── Headings ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-md);
}

/* h5 / h6 aren't used for visual hierarchy in this system — reserved for
   structural semantics. Consumers can restyle if needed. */
h5, h6 {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
}

/* ─── Display (hero splash) ───────────────────────────────────────────
   Use on an h1 for the `Welcome to Elements.` 72px splash.
   `.display-celebrate` is a step down at 52px (welcome-aboard). */

.display {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.02;
}

.display-celebrate {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ─── Prose ─────────────────────────────────────────────────────────
   Apply .prose to a container holding rendered article/tutorial copy.
   Switches body to Plex Sans and loosens line-height for readability. */

.prose {
  font-family: var(--font-prose);
  font-size: 1.03125rem;   /* 16.5px per design doc */
  line-height: var(--leading-relaxed);
  color: var(--ink);
  max-width: var(--container-prose);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h1, .prose h2, .prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.prose h1:first-child,
.prose h2:first-child { margin-top: 0; }

/* Inline code inside prose keeps Mono — the rule only switches body to Sans. */
.prose code {
  font-family: var(--font-code);
  font-size: 0.875em;
  background: var(--bg-panel);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-xs);
  color: var(--ink);
}

/* ─── Inline emphasis ─────────────────────────────────────────────── */

strong, b { font-weight: var(--font-semibold); color: var(--ink); }
em, i     { font-style: italic; }
small     { font-size: var(--text-xs); color: var(--ink-dim); }

/* ─── Links ─────────────────────────────────────────────────────────
   Two common link patterns in this system:

   - Prose links: inherit color, dotted --ink-faint underline offset 2px,
     rust on hover. Apply .link-prose, OR rely on the .prose container
     (see below) which sets this for descendant <a>.

   - "See all →" style: apply .link-more. 12px, --ink-soft, dotted
     bottom-border, rust on hover.

   Action verb links (EDIT / REVOKE / COPY / INVOICE) use .link-action —
   mono small-caps with tracking; these are UI verbs, not prose links. */

a { color: inherit; }

.prose a,
.link-prose {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
.prose a:hover,
.link-prose:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent-deep);
}

.link-more {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-faint);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.link-more:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.link-action {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-medium);
  color: var(--accent-deep);
  border-bottom: 1px dotted var(--accent-dot);
  padding-bottom: 1px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.link-action:hover { border-bottom-color: var(--accent-deep); }

.link-action-muted {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-medium);
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-faint);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.link-action-muted:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

/* ─── Eyebrow label ─────────────────────────────────────────────────
   Mono · 10.5px · uppercase · 0.14em tracking · ink-dim.
   Used above section heads, inside card heads, as row labels, etc. */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65625rem;           /* 10.5px */
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-dim);
  font-weight: var(--font-medium);
}

/* ─── Other element polish ──────────────────────────────────────────── */

blockquote {
  border-left: 3px solid var(--rule);
  padding-left: var(--space-4);
  color: var(--ink-soft);
}

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

kbd {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 0.0625rem 0.3125rem;
  color: var(--ink);
  font-weight: var(--font-medium);
}

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