/* ─────────────────────────────────────────────────────────────────────────
   Oxus Design System — Editorial Operations
   Voice: confident, restrained, journalistic. Numbers speak first; chrome
   gets out of the way. Looks expensive without being decorative.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,400..600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Surfaces & ink (warm) ──────────────────────────────────────────── */
  --oxus-bg:           #FAF9F5;   /* warm cream — paper, not screen */
  --oxus-bg-sunken:    #F4F2EA;   /* deeper paper — split panels */
  --oxus-surface:      #FFFFFF;   /* card */
  --oxus-ink:          #1F1E1B;   /* warm near-black */
  --oxus-muted:        #6F6E6B;   /* warm gray — body */
  --oxus-quiet:        #97958F;   /* helper, timestamps */
  --oxus-faint:        #BDB9AE;   /* dividers within color, axis labels */
  --oxus-border:       #E8E5DC;   /* warm hairline */
  --oxus-border-soft:  #F0EDE3;   /* inner divider */
  --oxus-border-strong: #D6D2C5;  /* hover hairline */

  /* ── Accents (use ONE primary; others rare) ─────────────────────────── */
  --oxus-copper:       #C96342;   /* primary — Anthropic-adjacent */
  --oxus-copper-deep:  #A84D2E;   /* hover/press */
  --oxus-copper-soft:  #F6E5DD;   /* tint surface */
  --oxus-rust:         #B33A1B;   /* critical / error */
  --oxus-pine:         #4A6B3A;   /* success */
  --oxus-ink-blue:     #2B3A5C;   /* info / link */

  --oxus-rust-soft:    #F4DAD2;
  --oxus-pine-soft:    #E1E8DA;
  --oxus-ink-blue-soft:#D6DCE6;

  /* ── Geometry ───────────────────────────────────────────────────────── */
  --oxus-radius-sm:   4px;     /* tags, mono chips */
  --oxus-radius:      8px;     /* default — buttons, inputs, sub-cards */
  --oxus-radius-card: 12px;    /* cards */
  --oxus-radius-hero: 16px;    /* hero blocks, big surfaces */
  --oxus-radius-pill: 9999px;

  /* ── Shadows (barely-there, warm) ───────────────────────────────────── */
  --oxus-shadow-hover: 0 1px 2px rgba(31, 30, 27, 0.04), 0 4px 12px rgba(31, 30, 27, 0.05);
  --oxus-shadow-pop:   0 8px 24px rgba(31, 30, 27, 0.08);
  --oxus-shadow-modal: 0 24px 48px rgba(31, 30, 27, 0.12);

  /* ── Spacing — bias to larger gaps, more whitespace ─────────────────── */
  --oxus-s-1:  4px;
  --oxus-s-2:  8px;
  --oxus-s-3:  12px;
  --oxus-s-4:  16px;
  --oxus-s-6:  24px;
  --oxus-s-10: 40px;
  --oxus-s-16: 64px;

  /* ── Type families ──────────────────────────────────────────────────── */
  --oxus-serif:  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --oxus-sans:   "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oxus-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale ─────────────────────────────────────────────────────── */
  --oxus-text-2xs: 11px;
  --oxus-text-xs:  12px;
  --oxus-text-sm:  14px;
  --oxus-text-base: 16px;
  --oxus-text-lg:  19px;
  --oxus-text-xl:  24px;
  --oxus-text-2xl: 32px;
  --oxus-text-3xl: 44px;
  --oxus-text-4xl: 60px;
  --oxus-text-display: 76px;
}

/* ─── Type roles — explicit weights, no defaults ───────────────────────── */

/* Display: Source Serif at 400, optical-sizing on. Italics for emphasis only. */
.oxus-display {
  font-family: var(--oxus-serif);
  font-size: var(--oxus-text-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--oxus-ink);
}

.oxus-h1 {
  font-family: var(--oxus-serif);
  font-size: var(--oxus-text-3xl);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--oxus-ink);
}

.oxus-h2 {
  font-family: var(--oxus-serif);
  font-size: var(--oxus-text-2xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--oxus-ink);
}

/* Sans subhead — section labels above editorial content */
.oxus-h3 {
  font-family: var(--oxus-sans);
  font-size: var(--oxus-text-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--oxus-ink);
}

/* Big number — serif, tabular */
.oxus-stat {
  font-family: var(--oxus-serif);
  font-size: var(--oxus-text-4xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oxus-ink);
  font-variant-numeric: tabular-nums;
}

.oxus-body {
  font-family: var(--oxus-sans);
  font-size: var(--oxus-text-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--oxus-muted);
}

.oxus-body-lg {
  font-family: var(--oxus-sans);
  font-size: var(--oxus-text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--oxus-muted);
}

.oxus-lede {
  font-family: var(--oxus-serif);
  font-size: var(--oxus-text-lg);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--oxus-ink);
}

/* Eyebrow — JetBrains Mono uppercase, the masthead voice */
.oxus-eyebrow {
  font-family: var(--oxus-mono);
  font-size: var(--oxus-text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--oxus-muted);
}

.oxus-mono {
  font-family: var(--oxus-mono);
  font-size: var(--oxus-text-xs);
  font-weight: 400;
  color: var(--oxus-ink);
  font-variant-numeric: tabular-nums;
}

.oxus-num {
  font-family: var(--oxus-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.oxus-helper {
  font-family: var(--oxus-sans);
  font-size: var(--oxus-text-xs);
  color: var(--oxus-quiet);
}

/* ─── Reusable atoms ────────────────────────────────────────────────────── */

.oxus-link {
  color: var(--oxus-ink-blue);
  text-decoration: underline;
  text-decoration-color: var(--oxus-faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.oxus-link:hover {
  color: var(--oxus-copper);
  text-decoration-color: currentColor;
}

.oxus-card {
  background: var(--oxus-surface);
  border: 1px solid var(--oxus-border);
  border-radius: var(--oxus-radius-card);
}
.oxus-card:hover {
  box-shadow: var(--oxus-shadow-hover);
}

.oxus-rule {
  height: 1px;
  background: var(--oxus-border);
  border: 0;
}

/* Editorial double rule — used on hero sections */
.oxus-rule-double {
  height: 4px;
  border-top: 1px solid var(--oxus-ink);
  border-bottom: 1px solid var(--oxus-ink);
  background: transparent;
}