/* ============================================================
   Beam theme — reusable design tokens + base styles
   Tokens measured from beam.ai (2026-06-16). Self-contained.
   Usage in a page:  <link rel="stylesheet" href="/beam-theme.css">
   ============================================================ */
@import url("/fonts/satoshi.css");

:root {
  /* brand */
  --ink:          oklch(0.26 0.09 285);   /* #19154E deep indigo — headings/ink */
  --ink-deep:     oklch(0.20 0.09 285);   /* #0F0C36 — dark sections */
  --accent:       #0062ff;                /* Beam core blue */
  --accent-bright:#0062ff;
  --accent-hover: #0054d6;
  --accent-soft:  #eaf1ff;
  /* neutrals (tinted toward indigo 285, chroma ~0.005) */
  --bg:           oklch(0.99 0.003 285);
  --surface:      oklch(0.975 0.004 285);
  --border:       oklch(0.91 0.005 285);
  --text:         oklch(0.27 0.04 285);
  --text-muted:   oklch(0.52 0.02 285);   /* #5B5E76 */
  /* semantic */
  --ok:   oklch(0.60 0.14 150);
  --warn: oklch(0.72 0.15 70);
  --err:  oklch(0.56 0.20 25);
  /* type */
  --font: "Satoshi", "Inter", -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", "DM Mono", ui-monospace, "SF Mono", monospace;
  /* shape / rhythm */
  --radius: 12px; --radius-sm: 8px;
  --maxw: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        oklch(0.20 0.05 285);
    --surface:   oklch(0.24 0.05 285);
    --border:    oklch(0.32 0.04 285);
    --text:      oklch(0.95 0.01 285);
    --text-muted:oklch(0.70 0.02 285);
    --ink:       oklch(0.95 0.01 285);
    --accent:    #66a0ff;
    --accent-hover: #9ac0ff;
    --accent-soft: rgba(0, 98, 255, 0.24);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font);
  font-size: 17px; line-height: 1.65;
  color: var(--text); background: var(--bg);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* type scale — ratio ~1.25, hierarchy via scale + weight */
h1 { font-size: 2.1rem; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 2.4rem 0 .75rem; }
h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 .5rem; }
p, li { max-width: 68ch; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
strong { font-weight: 700; color: var(--ink); }
code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .08em .4em; font-size: .9em; }

/* eyebrow (use sparingly — max 1 per 3 sections) */
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .4rem; }

/* tables — clean, no per-row double borders */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
th { text-align: left; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--border); padding: .55rem .6rem; }
td { border-bottom: 1px solid var(--border); padding: .55rem .6rem; vertical-align: top; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* badges / status */
.badge { display: inline-block; font-size: .78rem; font-weight: 500; padding: .12em .6em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); }
.badge.ok { background: oklch(0.95 0.05 150); color: var(--ok); }
.badge.warn { background: oklch(0.96 0.06 80); color: oklch(0.45 0.13 60); }
.badge.err { background: oklch(0.95 0.05 25); color: var(--err); }

/* divider */
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* dark indigo section (for slide-style emphasis blocks) */
.ink-block { background: var(--ink-deep); color: oklch(0.95 0.01 285); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.ink-block h2, .ink-block h3, .ink-block strong { color: oklch(0.98 0.01 285); }
.ink-block a { color: var(--accent-bright); }

@media (prefers-reduced-motion: no-preference) {
  a, .badge { transition: color .15s ease, background .15s ease; }
}