/* Throughline — design tokens
   Dark-first. Editorial sans + mono. No gradients, no glow.
*/

:root {
  /* ---- Color (dark) ---- */
  --bg:            oklch(0.155 0.005 250);   /* paper-black */
  --bg-raised:    oklch(0.185 0.006 250);
  --bg-sunk:      oklch(0.135 0.005 250);
  --line:         oklch(0.265 0.008 250);   /* hairline */
  --line-strong:  oklch(0.34  0.010 250);
  --fg:           oklch(0.94  0.012 85);    /* warm cream */
  --fg-muted:     oklch(0.74  0.010 85);
  --fg-dim:       oklch(0.56  0.008 250);
  --fg-faint:     oklch(0.42  0.008 250);

  /* Signal accents — same chroma+L, varied hue */
  --signal-emerged:    oklch(0.78 0.13 75);    /* warm amber */
  --signal-disappeared:oklch(0.72 0.07 235);   /* slate-cyan */
  --signal-dodged:     oklch(0.68 0.13 25);    /* dim red */
  --signal-walked:     oklch(0.74 0.09 320);   /* dusty mauve, for guidance */

  /* Brand accent — Throughline violet, used by the logo dot and any
     "spot what matters" highlight. Tuned to the logo's gradient terminus. */
  --accent: oklch(0.66 0.18 285);

  /* Hover/focus */
  --focus: oklch(0.94 0.012 85);

  /* ---- Type ---- */
  --f-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  --fs-mono-xs: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    26px;
  --fs-2xl:   34px;
  --fs-3xl:   46px;
  --fs-4xl:   64px;

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  1.54;
  --lh-loose: 1.72;

  /* ---- Spacing (8pt with mono ledger feel) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --col: 720px;       /* editorial column */
  --gutter: 24px;
  --rail: 56px;       /* mono rail width */

  --radius: 2px;
  --radius-md: 4px;
}

/* ---- Light theme (derived) ---- */
[data-theme="light"] {
  --bg:           oklch(0.985 0.004 85);
  --bg-raised:   oklch(0.965 0.004 85);
  --bg-sunk:     oklch(0.99  0.003 85);
  --line:        oklch(0.86  0.005 85);
  --line-strong: oklch(0.74  0.005 85);
  --fg:          oklch(0.20  0.008 250);
  --fg-muted:    oklch(0.38  0.008 250);
  --fg-dim:      oklch(0.52  0.008 250);
  --fg-faint:    oklch(0.66  0.008 250);

  --signal-emerged:    oklch(0.55 0.14 60);
  --signal-disappeared:oklch(0.50 0.08 235);
  --signal-dodged:     oklch(0.50 0.16 25);
  --signal-walked:     oklch(0.50 0.10 320);

  --accent: oklch(0.52 0.20 285);
}

/* ---- Density tweak ---- */
[data-density="compact"] {
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;
  --fs-4xl: 52px;
  --lh-body: 1.46;
  --s-5: 18px;
  --s-6: 24px;
  --s-7: 36px;
  --s-8: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

body {
  font-variation-settings: "opsz" 18;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--signal-emerged); color: var(--bg); }

/* ---- Typography utilities ---- */
.mono { font-family: var(--f-mono); font-feature-settings: "ss01", "zero"; }
.serif { font-family: var(--f-serif); font-style: normal; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.h-display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.h-1 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
}

.h-2 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
}

.h-3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

.body-prose {
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.body-prose p + p { margin-top: var(--s-4); }

.muted { color: var(--fg-muted); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }

/* Hairline */
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Utility */
.col {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gutter);
}