/* ===========================================================================
   Conduit website — Night base (2026-10)
   Loaded on every page, after site.css and v2.css (and before night.css on
   the home page and cjk.css, so the CJK font stacks still win). The app's
   Nocturne look: cool greys, Schibsted Grotesk and JetBrains Mono, indigo as
   the one accent in both themes. It redefines the tokens site.css and v2.css
   already read, then restyles the shared chrome and each page type.
   =========================================================================== */

/* --- Fonts: the app's, self-hosted ---------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/SchibstedGrotesk-Latin-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/SchibstedGrotesk-LatinExt-Variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Latin-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-LatinExt-Variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens: light (the base) --------------------------------------------- */

:root {
  --font-ui: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #f6f6f8;
  --bg-side: #eff0f4;
  --card: #ffffff;
  --card-hi: #f1f2f5;
  --line: #e1e3ea;
  --line-soft: #e8eaef;
  --line-hi: #cfd2dc;
  --ink: #16181d;
  --ink-2: #3a3f4a;
  --ink-3: #5f6573;
  --link: #2a2aa8;
  --ok: #12804a;
  --warn: #a35a00;

  --a-accent: #4b4ded;
  --a-accent-text: #2a2aa8;
  --a-on-accent: #ffffff;
  --a-soft: #eef0ff;
  --a-band: #e9eaf6;
  --a-frame: #ffffff;
  --a-tray: #eff0f4;
  --a-warn-bg: #fff8ea;
  --a-warn-line: #f0d29a;
  --a-code-bg: #16181d;
  --a-shadow: 0 30px 70px rgba(42, 42, 120, 0.16), 0 2px 8px rgba(22, 24, 29, 0.06);
  --a-shadow-sm: 0 10px 30px rgba(42, 42, 120, 0.10);
  --a-shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.04), 0 8px 24px rgba(42, 42, 120, 0.06);
  --a-num: linear-gradient(160deg, #2a2aa8 10%, #4b4ded 90%);

  /* The older pages' tokens, pointed at the same palette. */
  --hue: #4b4ded;
  --hue-text: #2a2aa8;
  --hue-solid: #4b4ded;
  --hue-wash: rgba(75, 77, 237, 0.08);
  --code: #2a2aa8;
  --err: #c42b2b;
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.05);
  --shadow: var(--a-shadow-xs);
  --shadow-lg: var(--a-shadow-sm);
}

/* --- Tokens: dark ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12;
    --bg-side: #0e1117;
    --card: #11141b;
    --card-hi: #161a23;
    --line: #1c2130;
    --line-soft: #161a24;
    --line-hi: #2a3042;
    --ink: #e8eaf0;
    --ink-2: #b8becc;
    --ink-3: #8990a2;
    --link: #a5a8ff;
    --ok: #7cffb2;
    --warn: #febc2e;
    --a-accent: #5558e8;
    --a-accent-text: #a5a8ff;
    --a-on-accent: #ffffff;
    --a-soft: rgba(99, 102, 241, 0.18);
    --a-band: #10131a;
    --a-frame: #161a23;
    --a-tray: #0e1117;
    --a-warn-bg: rgba(254, 188, 46, 0.07);
    --a-warn-line: rgba(254, 188, 46, 0.3);
    --a-code-bg: #07090d;
    --a-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    --a-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.4);
    --a-shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --a-num: linear-gradient(160deg, #a5a8ff 10%, #5558e8 90%);
    --hue: #a5a8ff;
    --hue-text: #a5a8ff;
    --hue-solid: #5558e8;
    --hue-wash: rgba(99, 102, 241, 0.12);
    --code: #c3c5ff;
    --err: #ff8a8a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: var(--a-shadow-xs);
    --shadow-lg: var(--a-shadow-sm);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-side: #0e1117;
  --card: #11141b;
  --card-hi: #161a23;
  --line: #1c2130;
  --line-soft: #161a24;
  --line-hi: #2a3042;
  --ink: #e8eaf0;
  --ink-2: #b8becc;
  --ink-3: #8990a2;
  --link: #a5a8ff;
  --ok: #7cffb2;
  --warn: #febc2e;
  --a-accent: #5558e8;
  --a-accent-text: #a5a8ff;
  --a-on-accent: #ffffff;
  --a-soft: rgba(99, 102, 241, 0.18);
  --a-band: #10131a;
  --a-frame: #161a23;
  --a-tray: #0e1117;
  --a-warn-bg: rgba(254, 188, 46, 0.07);
  --a-warn-line: rgba(254, 188, 46, 0.3);
  --a-code-bg: #07090d;
  --a-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --a-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.4);
  --a-shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --a-num: linear-gradient(160deg, #a5a8ff 10%, #5558e8 90%);
  --hue: #a5a8ff;
  --hue-text: #a5a8ff;
  --hue-solid: #5558e8;
  --hue-wash: rgba(99, 102, 241, 0.12);
  --code: #c3c5ff;
  --err: #ff8a8a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: var(--a-shadow-xs);
  --shadow-lg: var(--a-shadow-sm);
}

body {
  background: var(--bg);
}

/* --- Buttons and small furniture ------------------------------------------ */

.btn--primary {
  background: var(--a-accent);
  border-color: var(--a-accent);
  color: var(--a-on-accent);
  border-radius: 12px;
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--a-accent);
  border-color: var(--a-accent);
  filter: brightness(1.08);
}

.btn--ghost {
  border-color: var(--line-hi);
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  font-weight: 600;
}

.btn--ghost:hover {
  border-color: var(--ink-3);
  background: var(--card);
}

.btn--lg {
  padding: 14px 22px;
  font-size: 16px;
}

.eyebrow {
  color: var(--a-accent-text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.link-arrow,
.lede a,
.faq .answer a {
  color: var(--a-accent-text);
}

/* --- Header ------------------------------------------------------------------ */

.site-header {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--line);
}

.site-header .brand .mark {
  color: var(--a-accent);
}

.site-header .nav-cta {
  border-radius: 10px;
}

/* --- Shared components: CTA card, FAQ, code, callouts, chips -------------- */

.cta-band {
  padding: 64px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--a-shadow-sm);
}

.cta-band h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.code,
.faq {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--card);
}

.chip {
  border-color: var(--line);
  background: var(--bg);
}

.split-media.shot {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--a-frame);
  box-shadow: var(--a-shadow-sm);
}

.split-media .shot-body,
.split-media img {
  border: 0;
  border-radius: 8px;
}

.callout {
  border-color: var(--a-warn-line);
  border-radius: 14px;
  background: var(--a-warn-bg);
}

.callout svg {
  color: var(--warn);
}

.code {
  border: 0;
  background: var(--a-code-bg);
}

.code-head {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #8990a2;
}

/* The block is dark in both themes, so its furniture is fixed too. */
.code .copy-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #b8becc;
}

.code .copy-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #e8eaf0;
}

.code .copy-btn.is-done {
  border-color: #7cffb2;
  color: #7cffb2;
}

.code .c-key {
  color: #a5a8ff;
}

.code .c-str {
  color: #ffc94c;
}

.code .c-sec {
  color: #e8eaf0;
}

.code pre,
.code code {
  color: #e8eaf0;
}

.code .c-comment {
  color: #8990a2;
}

.code .c-cmd {
  color: #a5a8ff;
}

/* --- Page types: articles (.page-head + .prose) and landing pages (.lp-hero) */

/* Eyebrows inside .prose and .split-body, whose paragraph colour would win. */
.prose .eyebrow,
.split-body .eyebrow {
  color: var(--a-accent-text);
}

/* One accent, no hue washes, as on the home page. */
.lp-hero::before {
  display: none;
}

.page-head h1,
.lp-hero h1 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

.prose h2,
.sec-head h2,
.section-head h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.nav-links a[aria-current="page"] {
  background: var(--a-soft);
  color: var(--a-accent-text);
}

/* Screenshots in articles get the home page's white frame. */
.prose .shot {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--a-frame);
  box-shadow: var(--a-shadow-sm);
}

.prose .shot .shot-body,
.prose .shot img {
  border: 0;
  border-radius: 8px;
}

.shot-bar {
  display: none;
}

.prose th {
  background: var(--card-hi);
}