:root {
  /* ── Monochrome palette ──────────────────────────────────────────────
     One hue family, neutral to the eye. Value does all the work: there is no
     chromatic accent anywhere in this system. Chroma is capped at 0.004 so
     nothing reads as warm or cool. */
  --gray-1: oklch(0.145 0.002 275); /* deepest ink — inverted grounds */
  --gray-2: oklch(0.235 0.003 275);
  --gray-3: oklch(0.33 0.003 275);
  --gray-4: oklch(0.47 0.003 275);
  --gray-5: oklch(0.63 0.003 275);
  --gray-6: oklch(0.76 0.003 275);
  --gray-7: oklch(0.87 0.003 275);
  --gray-8: oklch(0.925 0.003 275);
  --gray-9: oklch(0.958 0.002 275);
  --gray-10: oklch(0.978 0.002 275);

  /* Neutrals */
  --paper: var(--gray-10);
  --paper-2: var(--gray-9);
  --paper-3: var(--gray-8);
  --mask-opaque: #000;
  --mask-clear: transparent;
  --ink-1: oklch(0.185 0.002 275);
  --ink-2: oklch(0.435 0.003 275);
  /* Small muted text must also meet AA on the page and sunken surfaces. */
  --ink-3: var(--gray-4);
  --ink-inverse: var(--gray-10);
  --rule: oklch(0.898 0.002 275);
  --rule-strong: oklch(0.812 0.003 275);

  /* Accents — emphasis is dark ink; there is no colored accent. */
  --accent: var(--gray-2);
  --accent-hover: var(--gray-1);
  --accent-press: var(--gray-1);
  --accent-2: var(--gray-5);
  --accent-3: var(--gray-4);
  /* Eyebrows and glyphs inside .ot-invert bands. */
  --accent-on-dark: var(--gray-6);
  --highlight: var(--gray-2);
  /* Explicit interactive exception: the AI twinkle gains color on hover. */
  --sparkle-hover: oklch(0.79 0.145 88);

  /* State: value + label, never hue. Success is ink, danger is ink with a
     heavier rule; the dot and the word carry the meaning. */
  --accent-success: oklch(0.33 0.003 275);
  --accent-danger: oklch(0.185 0.002 275);
  --success-deep: oklch(0.3 0.003 275);
  --danger-deep: oklch(0.185 0.002 275);

  /* Washes */
  --accent-wash: oklch(0.94 0.002 275);
  --highlight-wash: oklch(0.94 0.002 275);
  --muted-wash: oklch(0.952 0.002 275);
  --success-wash: oklch(0.945 0.002 275);
  --danger-wash: oklch(0.912 0.002 275);
  --focus-ring: oklch(0.235 0.003 275 / 0.28);

  /* Calls to action are black. */
  --cta: oklch(0.155 0.002 275);
  --cta-hover: oklch(0.245 0.003 275);

  --image-filter: grayscale(1) brightness(0.72) contrast(1.08);
  --image-filter-hover: grayscale(0) brightness(1) contrast(1);
  --logo-filter-rest: grayscale(1) contrast(1.12) opacity(0.58);
  --logo-filter-rest-bright: grayscale(1) brightness(0.45) contrast(1.15) opacity(0.72);
  --logo-filter-rest-pale: grayscale(1) brightness(0.25) contrast(1.35) opacity(0.88);
  --logo-filter-silhouette-rest: brightness(0) opacity(0.62);
  --logo-filter-silhouette-heavy: brightness(0) opacity(0.46);
  --logo-filter-silhouette-light: brightness(0) opacity(0.78);
  --logo-filter-hover: grayscale(0) brightness(1) opacity(1);
  --logo-filter-monochrome-hover: grayscale(1) opacity(1);
  --logo-surface: var(--gray-9);
  --logo-hover-surface: transparent;
  --emoji-filter: grayscale(1);
  --emoji-filter-hover: grayscale(0);
  --hero-art-filter: none;
  --hero-art-blend: multiply;

  /* Semantic aliases — prefer these in components. */
  --surface-page: var(--paper);
  --surface-card: oklch(1 0 0);
  --surface-sunken: var(--paper-2);
  --surface-inverse: var(--gray-1);
  --surface-accent: var(--accent);
  --surface-accent-soft: var(--accent-wash);
  --surface-home-integrations: var(--surface-card);

  --text-display: var(--ink-1);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-strong: var(--ink-1);
  --text-inverse: var(--ink-inverse);
  --text-link: var(--ink-1);
  --text-link-hover: var(--gray-3);

  --border-subtle: var(--rule);
  --border-strong: var(--rule-strong);
  --border-accent: var(--accent);
}

html[data-theme='dark'] {
  color-scheme: dark;
}

html[data-theme='dark'] body {
  --paper: var(--gray-1);
  --paper-2: var(--gray-2);
  --paper-3: var(--gray-3);
  --ink-1: var(--gray-10);
  --ink-2: var(--gray-6);
  --ink-3: var(--gray-5);
  --surface-page: var(--gray-1);
  --surface-card: var(--gray-2);
  --surface-sunken: oklch(0.115 0.002 275);
  --surface-home-integrations: var(--surface-page);
  --text-display: var(--gray-10);
  --text-body: var(--gray-6);
  --text-muted: var(--gray-6);
  --text-strong: var(--gray-10);
  --text-inverse: var(--gray-1);
  --text-link: var(--gray-10);
  --text-link-hover: var(--gray-7);
  --border-subtle: oklch(0.3 0.003 275);
  --border-strong: oklch(0.39 0.003 275);
  --cta: var(--gray-10);
  --cta-hover: var(--gray-8);
  --accent: var(--gray-7);
  --accent-hover: var(--gray-10);
  --accent-press: var(--gray-10);
  --logo-filter-rest: grayscale(1) invert(1) contrast(1.12) opacity(0.62);
  --logo-filter-rest-bright: grayscale(1) brightness(0.45) invert(1) contrast(1.15) opacity(0.72);
  --logo-filter-rest-pale: grayscale(1) brightness(0.25) invert(1) contrast(1.35) opacity(0.88);
  --logo-filter-silhouette-rest: brightness(0) invert(1) opacity(0.66);
  --logo-filter-silhouette-heavy: brightness(0) invert(1) opacity(0.48);
  --logo-filter-silhouette-light: brightness(0) invert(1) opacity(0.8);
  --logo-filter-monochrome-hover: grayscale(1) invert(1) opacity(1);
  --logo-surface: var(--gray-2);
  --logo-hover-surface: var(--gray-10);
  --hero-art-filter: grayscale(1) brightness(1.35) contrast(0.92);
  --hero-art-blend: screen;
}

/* Inverted scope — mission band, comparison band, footer, code surfaces. */
.ot-invert {
  --surface-page: var(--gray-1);
  --surface-card: var(--gray-2);
  --surface-sunken: oklch(0.115 0.002 275);
  --text-display: var(--gray-10);
  --text-body: var(--gray-6);
  --text-muted: var(--gray-6);
  --text-strong: var(--gray-10);
  --accent-on-dark: var(--gray-6);
  --border-subtle: oklch(0.3 0.003 275);
  --border-strong: oklch(0.39 0.003 275);
  --text-link: var(--gray-10);
  --text-link-hover: var(--gray-7);
  color: var(--text-body);
  background: var(--surface-page);
}

/* The mission band always contrasts with the page around it. */
html[data-theme='dark'] .mission.ot-invert,
html[data-theme='dark'] .waitlist-option.ot-invert {
  --surface-page: var(--gray-10);
  --surface-card: var(--gray-9);
  --surface-sunken: var(--gray-9);
  --text-display: var(--gray-1);
  --text-body: var(--gray-3);
  --text-muted: var(--gray-4);
  --text-strong: var(--gray-1);
  --accent-on-dark: var(--gray-4);
  --border-subtle: var(--gray-8);
  --border-strong: var(--gray-6);
  --text-link: var(--gray-1);
  --text-link-hover: var(--gray-3);
}