/* =====================================================================
   Thread · design tokens
   The forum and community. Light is "Day" (paper, ink); dark is "Lights out".
   --ultra is the one accent (buttons, links, votes, the thread line).
   --mint marks what's solved and accepted (a background; --mint-ink for text).
   --flag is only for reports and removed posts.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f6f6f3;
  --card: #ffffff;
  --well: #eeeee9;
  --line: #dcdcd4;
  --ink: #15171c;
  --ink-2: #3a3d45;
  --muted: #5d6069;
  --ultra: #2b45d6;
  --ultra-2: #2236ac;
  --on-ultra: #ffffff;
  --ultra-soft: #e4e8fb;
  --mint: #b9f3d6;
  --mint-ink: #0f6b47;
  --flag: #b42318;
  --flag-soft: #fde4e1;
  --focus: #2b45d6;
  --shadow-card: 0 1px 2px rgba(21, 23, 28, 0.05), 0 14px 30px -22px rgba(21, 23, 28, 0.32);
  --shadow-lift: 0 28px 56px -28px rgba(21, 23, 28, 0.42);

  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(42px, 5.6vw, 84px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Lights out ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101114;
    --card: #18191e;
    --well: #14151a;
    --line: #2a2c33;
    --ink: #eceef3;
    --ink-2: #c9ccd4;
    --muted: #9a9daa;
    --ultra: #9fb0ff;
    --ultra-2: #bfcaff;
    --on-ultra: #0c1440;
    --ultra-soft: #1d2342;
    --mint: #1f4a39;
    --mint-ink: #7fe0b2;
    --flag: #ff8b80;
    --flag-soft: #3a1a17;
    --focus: #9fb0ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101114;
  --card: #18191e;
  --well: #14151a;
  --line: #2a2c33;
  --ink: #eceef3;
  --ink-2: #c9ccd4;
  --muted: #9a9daa;
  --ultra: #9fb0ff;
  --ultra-2: #bfcaff;
  --on-ultra: #0c1440;
  --ultra-soft: #1d2342;
  --mint: #1f4a39;
  --mint-ink: #7fe0b2;
  --flag: #ff8b80;
  --flag-soft: #3a1a17;
  --focus: #9fb0ff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}