:root {
  /* Default to LIGHT (the product default for everyone). This is what the very
     first paint uses before the theme boot script runs, so there is no
     flash-of-OS-theme on load — critical on mobile, where the OS is often dark.
     The toggle narrows/overrides via [data-theme] below: an explicit "system"
     choice restores "light dark" so light-dark() tracks the OS live. */
  color-scheme: light;

  --font-fallback: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: var(--font-inter, var(--font-fallback));
  --font-secondary: var(--font-newsreader, var(--font-fallback));
  --font-code: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    Courier, monospace;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     Every themeable color is light-dark(<light>, <dark>). The browser
     resolves it from the element's used color-scheme (inherited from :root),
     so a single token definition serves both themes. Migrate raw hex / rgba
     onto these — never hard-code a themeable color in a leaf file again.
     Dark values are ChatGPT-anchored and WCAG-AA verified (see
     docs/adr/dark-mode-and-token-system-2026-06.md).
     ============================================================ */

  /* Surfaces — page ground up through overlays. Light mode: white page (the
     know.fast white canvas — the old warm #faf9f6 paper clashed with the cool
     neutral component greys), cards sit on it via hairlines + shadows. Dark
     mode uses a DIFFERENT philosophy: a TRUE BLACK page with components lifted
     as distinct greys, so cards clearly float (depth reads via the lightness
     ladder since shadows vanish on black). */
  --surface: light-dark(#ffffff, #000000);
  --surface-raised: light-dark(#ffffff, #1a1a1c);
  --surface-sunken: light-dark(#f8f8f8, #0d0d0f);
  --surface-overlay: light-dark(#ffffff, #242426);
  /* Sent-message (user) chat bubble: a soft grey that floats off the page in
     both themes (charcoal on the black page, neutral light-grey on the white
     page) — instead of a hard white/ink block. Text uses --ink for contrast. */
  --chat-bubble-user: light-dark(#ededed, #2c2c2e);
  --surface-scrim: light-dark(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62));
  /* Frosted dialog/dock backdrop — a LIGHT blur over the page in light mode,
     a dark dim in dark mode (used with backdrop-filter). Distinct from the pure
     dark scrim above. */
  --surface-backdrop: light-dark(rgba(255, 255, 255, 0.72), rgba(18, 18, 20, 0.6));

  /* Ink — text ladder. MUST be solid (or alpha-on-black in light only); the
     dark values are solid greys, never low-alpha white, so contrast is
     deterministic over any surface. */
  --ink: light-dark(#111111, #ececec);
  --ink-muted: light-dark(rgba(0, 0, 0, 0.56), #b4b4b4);
  --ink-faint: light-dark(rgba(0, 0, 0, 0.4), #8e8e93);
  --ink-inverse: light-dark(#ffffff, #1c1c1e);

  /* Lines / borders. Dark values are intentionally higher-alpha than a literal
     10% hairline: on the true-black ground a 6–10% white line is nearly
     invisible (table rules, tab underlines, list dividers), so they're bumped
     for legibility. */
  --line: light-dark(#ebebeb, rgba(255, 255, 255, 0.15));
  --line-strong: light-dark(#d9d9d9, rgba(255, 255, 255, 0.24));
  --line-faint: light-dark(#e4e4e4, rgba(255, 255, 255, 0.1));

  /* Accent — the real app accent (#1d4ed8), lightened in dark for AA. */
  --accent: light-dark(#1d4ed8, #4d9fff);
  --accent-hover: light-dark(#1640b8, #6cb2ff);
  --accent-ink: light-dark(#ffffff, #0a1220);
  /* Accent tint fill + line — the faint blue "current/running/highlighted"
     callouts (rgba(36,128,237,.045-.07) fills, rgba(29,78,216,.16-.22) borders). */
  --accent-tint: light-dark(rgba(36, 128, 237, 0.07), rgba(77, 159, 255, 0.16));
  --accent-line: light-dark(rgba(29, 78, 216, 0.2), rgba(77, 159, 255, 0.34));
  /* Info / queued — indigo status, distinct from the link accent. */
  --info: light-dark(#4f46e5, #8b87f0);

  /* State — success / danger / warning. Each: base + tint fill + line. */
  --success: light-dark(#65c466, #3fcf5f);
  --success-tint: light-dark(rgba(101, 196, 102, 0.13), rgba(63, 207, 95, 0.16));
  --success-line: light-dark(rgba(101, 196, 102, 0.45), rgba(63, 207, 95, 0.42));
  --danger: light-dark(#ea3223, #ff6257);
  --danger-hover: light-dark(#d42c20, #ff7a70);
  --danger-tint: light-dark(rgba(234, 50, 35, 0.07), rgba(255, 98, 87, 0.14));
  --danger-line: light-dark(rgba(234, 50, 35, 0.22), rgba(255, 98, 87, 0.34));
  --warning: light-dark(#b45309, #f5b942);
  --warning-tint: light-dark(rgba(180, 83, 9, 0.1), rgba(245, 185, 66, 0.14));
  --warning-line: light-dark(rgba(180, 83, 9, 0.3), rgba(245, 185, 66, 0.34));
  /* Text/icon on a SOLID --warning fill (white in light; dark in dark, since the
     dark warning is a light amber). */
  --warning-ink: light-dark(#ffffff, #2a1500);

  /* Interaction overlays — black wash in light, white wash in dark. light-dark()
     does the black->white flip for free; consumers just use the token. */
  --hover-bg: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.055));
  --active-bg: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.09));
  --selected-bg: light-dark(rgba(29, 78, 216, 0.08), rgba(77, 159, 255, 0.16));

  /* Focus + selection */
  --focus-ring: light-dark(rgba(0, 122, 255, 0.5), rgba(108, 178, 255, 0.6));
  --selection-bg: light-dark(#e9e9e9, rgba(77, 159, 255, 0.3));
  --selection-color: light-dark(#111111, #ffffff);

  /* Elevation — geometry is constant; only the shadow color flips per theme.
     Dark shadows are much heavier (a soft black shadow is invisible on dark). */
  --shadow-color-weak: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45));
  --shadow-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
  --shadow-color-strong: light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.7));
  --shadow-sm: 0 1px 2px var(--shadow-color-weak);
  --shadow-md: 0 12px 32px var(--shadow-color);
  --shadow-lg: 0 24px 64px -18px var(--shadow-color-strong),
    0 2px 8px var(--shadow-color-weak);

  /* ---- Back-compat aliases: old token names → new semantic tokens. Keeps
     existing consumers working (and themed) during/after the leaf migration.
     Light values are preserved exactly; only the alias target changed. ---- */
  --body-color: var(--ink);
  --heading-color: var(--ink);
  --body-bg: var(--surface);
  --muted: light-dark(rgba(0, 0, 0, 0.4), #b4b4b4);
  --link-color: var(--accent);
  --soft-line: var(--line-faint);
  --focus-color: var(--focus-ring);
  --success-color: var(--success);
  --danger-color: var(--danger);
  --danger-color-hover: var(--danger-hover);
  --danger-soft-tint: var(--danger-tint);
  --danger-soft-line: var(--danger-line);

  /* Warm-surface pilot RETIRED into the neutral cool scale (one system, themes
     to dark for free). These four are kept as permanent neutral aliases so the
     ~40 var(--warm-*) consumers stay terse and themed — do NOT reintroduce warm
     values here. New code should prefer the canonical --surface-*/--line/--ink. */
  --warm-surface: var(--surface);
  --warm-panel: var(--surface-raised);
  --warm-line: var(--line);
  --warm-ink: var(--ink);

  --researcher-page-width: 64rem;

  /* Motion language (shared so surfaces don't re-derive easings/durations).
     --ease-drawer is the iOS/Vaul "settle" curve; --ease-out-soft is a
     standard decelerate used for entrances and micro-interactions. */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-soft: cubic-bezier(0, 0, 0.2, 1);
  --dur-panel: 320ms;
  --dur-drawer: 360ms;
  --dur-sheet: 380ms;
  --dur-entrance: 300ms;
  --dur-micro: 150ms;
  --stagger-step: 50ms;
}

/* Theme override: the toggle sets data-theme on <html>; that narrows
   color-scheme to a single scheme, which flips every light-dark() token.
   "system" (or no attribute) leaves both schemes active = follow the OS. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="system"] {
  color-scheme: light dark;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: researcher-page-out;
}

::view-transition-new(root) {
  animation-name: researcher-page-in;
}

::view-transition-old(researcher-chat-composer),
::view-transition-new(researcher-chat-composer) {
  animation-duration: 210ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes researcher-page-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -0.25rem, 0) scale(0.998);
  }
}

@keyframes researcher-page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45rem, 0) scale(0.998);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--body-bg);
  color: var(--body-color);
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
  overflow-anchor: none;
}

html,
html body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-y: scroll;
  background: var(--body-bg);
  color: var(--body-color);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.25rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-size-adjust: none;
  backface-visibility: hidden;
}

[hidden] {
  display: none !important;
}

main {
  width: 100%;
  margin: 0 auto;
  padding: 5rem 1rem 2.5rem;
}

@media screen and (max-width: 768px) {
  main {
    padding: 2rem 1.5rem 2.5rem;
  }
}

article {
  max-width: none;
}