/* ============================================================
   OpenHouse — tokens.css
   Inherited wholesale from the Columns / Voices system.
   Every value is concrete (DESIGN.md §2–§4). No adjectives.
   ============================================================ */

:root {
  /* ---- elevation ladder (real site tokens) ---- */
  --oh-bg:        #0D0D0D; /* base ground — dominant */
  --oh-surface:   #171717; /* raised section band */
  --oh-raised:    #222225; /* cards & highest elevation */

  /* ---- text — site alpha tokens ---- */
  --oh-text:      #FFFFFF;                  /* primary + accent */
  --oh-text-2:    rgba(255,255,255,0.70);   /* deks, bios, captions */
  --oh-text-3:    rgba(255,255,255,0.40);   /* decorative labels ONLY */

  --oh-line:      rgba(255,255,255,0.12);   /* hairline dividers */
  --oh-line-2:    rgba(255,255,255,0.07);
  --oh-accent:    #FFFFFF;                  /* white is the only accent */

  /* ---- type families ---- */
  --oh-font-display: "InterDisplay", "Inter", system-ui, sans-serif;
  --oh-font-body:    "Inter", system-ui, sans-serif;
  --oh-font-serif:   "Cormorant Garamond", Georgia, serif;
  /* system monospace — typewriter-editorial accents only (no new webfont) */
  --oh-font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- spacing — 4px base scale ---- */
  --oh-s1: 4px;   --oh-s2: 8px;   --oh-s3: 12px;  --oh-s4: 16px;
  --oh-s5: 24px;  --oh-s6: 32px;  --oh-s7: 48px;  --oh-s8: 64px;
  --oh-s9: 96px;  --oh-s10: 128px; --oh-s11: 160px;

  /* ---- radius — editorial sharp ---- */
  --oh-radius: 0;
  --oh-radius-media: 0;

  /* ---- layout ---- */
  --oh-maxw: 1280px;
  --oh-gutter: clamp(20px, 4vw, 64px);

  /* ---- motion ---- */
  --oh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* fluid ease-out (no overshoot/bounce) — slow, smooth menu open/close */
  --oh-ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  /* recalibrated (post-audit §2): slower, smoother cadence — entrances on
     --oh-ease-fluid; the old 600/450/300 read as hurried */
  --oh-dur-reveal: 1240ms; /* motion-refine: unified site cadence (was 900) */
  --oh-dur-hover: 700ms;
  /* spotlight (theme index) group hover */
  --oh-dur-spot: 420ms;
}

/* z-index scale: nav 50 · overlay 40 · sticky 30 · raised 20 · base 10 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* in-page anchor jumps glide (audit #19); reduced-motion users keep
   native instant jumps — the inertia layer (smooth-scroll.js) also
   exits entirely under reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--oh-bg);
  color: var(--oh-text);
  font-family: var(--oh-font-body);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.6;
}

::selection { background: #fff; color: #0D0D0D; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* brand focus ring (audit #8) — :where() keeps specificity 0 so inputs keep
   their border-focus and .oh-card-link keeps its own rule */
:where(a, button):focus-visible { outline: 2px solid var(--oh-text); outline-offset: 3px; }

/* ============================================================
   TYPE SCALE (DESIGN.md §3)
   ============================================================ */

.oh-display-xl {
  font-family: var(--oh-font-display);
  font-size: clamp(3.5rem, 11vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
}

.oh-display-lg {
  font-family: var(--oh-font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.oh-display-lg em {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.oh-title-card {
  font-family: var(--oh-font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.oh-title-post {
  font-family: var(--oh-font-serif);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

.oh-body {
  font-family: var(--oh-font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

.oh-body-serif {
  font-family: var(--oh-font-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 400;
}

.oh-label {
  font-family: var(--oh-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.oh-index {
  font-family: var(--oh-font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oh-text-3);
}

.oh-muted   { color: var(--oh-text-2); }
.oh-faint   { color: var(--oh-text-3); }