/* ════════════════════════════════════════════════════════════════════════
   EDITORIAL PRIMITIVES  ·  Slice 1
   ────────────────────────────────────────────────────────────────────────
   Reusable, namespaced building blocks that consume tokens.css. Every class
   is prefixed `.ed-` so it cannot collide with the legacy `.btn` / `.chip` /
   `.card` rules in styles.css. Colours are ONLY ever read from `var(--ed-*)`
   — no literal hex in this file (tokens.test.js enforces it), so the single
   source of truth for the palette stays in tokens.css.

   Inert until consumed: defining these classes paints nothing until a page
   adds the class to an element (slices 2–9).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Typography roles ─────────────────────────────────────────────────── */
.ed-display {
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-display);
  line-height: var(--ed-line-display);
  letter-spacing: var(--ed-tracking-display);
  color: var(--ed-color-text-primary);
}
.ed-h1 {
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-h1);
  line-height: var(--ed-line-h1);
  letter-spacing: var(--ed-tracking-heading);
  color: var(--ed-color-text-primary);
}
.ed-h2 {
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-regular);
  font-size: var(--ed-font-size-h2);
  line-height: var(--ed-line-h2);
  letter-spacing: var(--ed-tracking-heading);
  color: var(--ed-color-text-primary);
}
.ed-h3 {
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-regular);
  font-size: var(--ed-font-size-h3);
  line-height: var(--ed-line-h3);
  color: var(--ed-color-text-primary);
}
.ed-body {
  font-family: var(--ed-font-sans);
  font-weight: var(--ed-weight-regular);
  font-size: var(--ed-font-size-body);
  line-height: var(--ed-line-body);
  color: var(--ed-color-text-secondary);
}
.ed-body-sm {
  font-family: var(--ed-font-sans);
  font-size: var(--ed-font-size-body-sm);
  line-height: var(--ed-line-body);
  color: var(--ed-color-text-secondary);
}
.ed-caption {
  font-family: var(--ed-font-sans);
  font-size: var(--ed-font-size-caption);
  color: var(--ed-color-text-muted);
}

/* Decorative accent text — headline highlight phrase, inline emphasis.
   Uses the bright decorative amber (never the strong/interactive one). */
.ed-text-accent { color: var(--ed-color-accent); }

/* Metric numerals — the deliberate Fraunces-500 signature (mockup "67"/"23") */
.ed-metric {
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-metric);
  line-height: 1;
  letter-spacing: var(--ed-tracking-heading);
  color: var(--ed-color-text-primary);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── Mono labels & breadcrumbs ────────────────────────────────────────── */
.ed-label {
  font-family: var(--ed-font-mono);
  font-size: var(--ed-font-size-label);
  font-weight: var(--ed-weight-medium);
  letter-spacing: var(--ed-tracking-label);
  font-variant: small-caps;
  color: var(--ed-color-text-muted);
}
.ed-breadcrumb {
  font-family: var(--ed-font-mono);
  font-size: var(--ed-font-size-breadcrumb);
  letter-spacing: var(--ed-tracking-crumb);
  color: var(--ed-color-text-muted);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.ed-card {
  background: var(--ed-color-surface-raised);
  border: var(--ed-border-width) solid var(--ed-color-border-subtle);
  border-radius: var(--ed-radius-md);
  padding: var(--ed-space-14);
  box-shadow: var(--ed-shadow-sm);
}

/* ── Inverse panel ────────────────────────────────────────────────────────
   A dark espresso slab (hero/finale surface). Dark mode lifts to warm brown so
   it stays distinct from the near-black page — see tokens.css. Text is cream in
   both modes. Pair with layout (padding/radius) at the call site. */
.ed-surface-inverse-panel {
  background: var(--ed-color-bg-inverse-panel);
  color: var(--ed-color-text-inverse-panel);
  border: var(--ed-border-width) solid var(--ed-color-border-inverse-panel);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ed-space-6);
  font-family: var(--ed-font-sans);
  font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-caption);
  line-height: 1;
  padding: var(--ed-space-10) var(--ed-space-16);
  border-radius: var(--ed-radius-sm);
  border: var(--ed-border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ed-btn--primary {
  background: var(--ed-color-accent-strong);
  color: var(--ed-color-accent-on-accent);
}
.ed-btn--primary:hover {
  background: var(--ed-color-accent-strong-hover);
}
.ed-btn--secondary {
  background: transparent;
  border-color: var(--ed-color-border-default);
  color: var(--ed-color-text-secondary);
}
.ed-btn--secondary:hover {
  border-color: var(--ed-color-text-secondary);
  color: var(--ed-color-text-primary);
}
.ed-btn--lg {
  font-size: var(--ed-font-size-body);
  padding: var(--ed-space-12) var(--ed-space-24);
}
.ed-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ed-color-focus-ring);
}

/* ── Pill / chip ──────────────────────────────────────────────────────── */
.ed-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ed-space-6);
  background: var(--ed-color-accent-surface);
  color: var(--ed-color-accent-on-surface);
  font-family: var(--ed-font-sans);
  font-size: var(--ed-font-size-body-sm);
  font-weight: var(--ed-weight-medium);
  padding: var(--ed-space-6) var(--ed-space-12);
  border-radius: var(--ed-radius-sm);
}

/* ── Live indicator ───────────────────────────────────────────────────── */
.ed-live-dot {
  display: inline-block;
  width: var(--ed-space-8);
  height: var(--ed-space-8);
  border-radius: var(--ed-radius-full);
  background: var(--ed-color-success);
  box-shadow: 0 0 0 0 var(--ed-color-success-glow);
  animation: ed-pulse 1.8s ease-in-out infinite;
}
@keyframes ed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ed-color-success-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-live-dot { animation: none; }
}

/* ── Shared focus ring for any focusable primitive ────────────────────── */
.ed-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ed-color-focus-ring);
}