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

   One face for everything (sans). The system uses --font-sans across all
   chrome, prose, and headings; --font-mono is reserved for actual code
   surfaces (.code, fenced blocks, terminal, kbd) and inline `code` in
   prose.

   Headings (h1–h3) are bold + tight line-height. h4 is the eyebrow:
   small, uppercase, tracked.
============================================================================= */

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 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  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-2xl);
  letter-spacing: var(--tracking-snug);
}

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

/* h4 — uppercase eyebrow. The designer's H4 spec is small + tracked +
   bold (a section-header eyebrow, not a structural heading). */
h4 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.094em;       /* ≈1.5px tracked at 14px per spec */
}

/* 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) ─────────────────────────────────────────── */

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

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

/* ─── 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: var(--text-md);   /* 18px */
  line-height: var(--leading-body);
  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-bold); 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-sans);
  font-size: var(--text-xs);
  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-more:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.link-action {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-bold);
  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-sans);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--font-bold);
  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 ─────────────────────────────────────────────────
   Sans bold · 11px · uppercase · 0.14em tracking · ink-dim.
   Used above section heads, inside card heads, as row labels, etc. */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-dim);
  font-weight: var(--font-bold);
}

/* ─── 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;
}