/* ==========================================================================
   Deepinfo Docs: design tokens (Signal, docs/DESIGN-SIGNAL.md §1, §2, §7).
   Signal's semantic tokens are set per DEPTH: the element that carries data-depth takes that
   depth's whole list, and everything inside it reads the same names (--bg, --fg, --hi, …).
     :root (default)            surface-2: white reading content
     [data-depth='surface']     sage chrome: header, sidebar, drawer, footer
     [data-depth='surface-2']   white layers on sage: palette, menus, the environment popover
     [data-depth='bedrock']     deep moss: the reference's code column, the home hero
     [data-depth='deep']        near-black green
     [data-depth='field']       the closing card (the same in both themes)
   Dark theme (html[data-theme='dark'], set by theme.js) = the deep depth for the whole site:
   content #0D1810, chrome #141F16, the code column "night moss" #112812.
   Every depth block repeats the whole list on purpose: a custom property that uses var()
   resolves where it is declared, so a block that left one out would inherit another depth's.
   The earlier names (--c-*, --m-*, --link-*, --sp-*, …) are aliases of the Signal names, in one
   block on ":root, [data-depth]" so they resolve again on every depth. Raw colours live in
   this file only (the "tokens only" gate); fg-4 never colours text that carries meaning.
   ========================================================================== */

/* ---------- self-hosted fonts ----------
   Onest (variable 300–700) and Spline Sans Mono (variable 400–600), Google Fonts' latin
   subsets (assets/fonts/README.md; SIL OFL 1.1). JetBrains Mono stays as the mono stack's
   second face: Spline Sans Mono has no Cyrillic, so homoglyphs (аcme.example) fall back to it
   (same advance); it is not preloaded. U+2192 (→) is outside the latin range: the arrow comes
   from Onest's stack, as Signal intends. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/Onest-var-latin.cc61cbd6.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: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/SplineSansMono-var-latin.2b193a4f.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-400-latin.2c32b9b3.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-400-latin-ext.9c38cb2d.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;
}
/* Fallback faces with Onest's and Spline Sans Mono's metrics (deepinfo-landing-2026-new
   src/styles/97-type-onest.css, as they are): text laid out before the web fonts arrive takes
   the same room, so nothing rewraps when they land (CLS 0). size-adjust matches the average
   advance of running English text (Onest 400 0.4661em against Arial 0.4424em; Onest 600
   0.4754em against Arial Bold 0.4761em; Spline Sans Mono 0.600em against Menlo 0.602em and
   Courier New 0.600em); the ascent and descent overrides are Onest's (0.970 / 0.305) and
   Spline Sans Mono's (0.964 / 0.236), divided by the size-adjust. Latin-ext letters, which
   the latin Onest file does not carry, are drawn by the Onest Fallback face too. */
@font-face {
  font-family: 'Onest Fallback'; font-style: normal; font-weight: 100 549;
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 105.36%; ascent-override: 92.07%; descent-override: 28.95%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Onest Fallback'; font-style: normal; font-weight: 550 1000;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 99.86%; ascent-override: 97.14%; descent-override: 30.54%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Spline Sans Mono Fallback'; font-style: normal; font-weight: 100 1000;
  src: local('Menlo'), local('Menlo-Regular'), local('Courier New'), local('CourierNewPSMT');
  size-adjust: 99.66%; ascent-override: 96.73%; descent-override: 23.68%; line-gap-override: 0%;
}

/* ========================================================================== */

/* ---------- depth-independent (once) ---------- */
:root {
  /* families: Signal's stacks (landing 70-signal.css), fallback faces after the web fonts */
  --sans: 'Onest', 'Onest Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Spline Sans Mono', 'JetBrains Mono', 'Onest', 'Spline Sans Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: var(--sans);
  --font-mono: var(--mono);

  /* type scale, set for documentation (§2): Signal's families, weights, tracking and rhythm,
     sizes brought down to a reading column. Weights: 400 to 600, nothing lighter or heavier. */
  --fs-h1: clamp(2rem, 1.55rem + 1.5vw, 2.75rem); /* 32–44px */
  --fs-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22–28px */
  --fs-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18–20px */
  --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17–20px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-base: 1rem; /* 16px: prose and body */
  --fs-md: 0.875rem; /* 14px: table descriptions, card text, the sidebar */
  --fs-sm: 0.8125rem; /* 13px: xs, and data (mono) */
  --fs-xs: 0.6875rem; /* 11px: label (mono, uppercase) */
  --fs-code: 0.8rem; /* 12.8px: code blocks */

  /* spacing: Signal's scale, and the earlier --sp-* names on it (22→24, 28→32, 36→48, 48→64) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 11rem;
  --sp-1: var(--s-1);
  --sp-2: var(--s-2);
  --sp-3: var(--s-3);
  --sp-4: var(--s-4);
  --sp-5: var(--s-5);
  --sp-6: var(--s-6);
  --sp-7: var(--s-7);
  --sp-8: var(--s-8);

  /* radii: tag and method chip / button and field / code, callout and menu / panel and
     palette / the closing card */
  --radius-tag: 6px;
  --radius: 10px;
  --radius-code: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-sm: var(--radius-tag);

  /* layout (§3; docs.css "Responsive" retunes them per breakpoint) */
  --max: 1520px;
  --margin: clamp(16px, 3.6vw, 56px);
  --measure: 36rem; /* ledes */
  --measure-wide: 46rem; /* prose */
  --content-max: var(--measure-wide);
  --header-h: 64px;
  --sidebar-w: 264px;
  --toc-w: 224px;
  /* the content column's side padding (the docs' own --gutter, not Signal's column gutter) */
  --gutter: clamp(16px, 3.2vw, 48px);
  /* the reference's code column (maintainer, 2026-09-24) */
  --code-col-w: clamp(380px, 36vw, 560px);

  /* motion (§7): colour and opacity / things arriving / things travelling */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* brand fills */
  --field: #274b23;
  --field-deep: #193616;

  /* code: every code panel is near-black green on every depth, so its colours never change
     with the band. Contrast on #0D1810: code-fg 14.06, keyword 12.10, string 11.82,
     number 10.07, punct 8.42, comment 6.13, tab 7.48, code-ok 10.84. */
  --code-fg: #dce5d8;
  --code-keyword: #b8e07a;
  --code-string: #e4cf94;
  --code-number: #f3b38c;
  --code-punct: #f29a83;
  --code-comment: rgb(255 255 255 / 0.55);
  --code-tab: rgb(255 255 255 / 0.62);
  --code-tab-on: rgb(255 255 255 / 0.08); /* the selected tab's ground */
  --code-rule: rgb(255 255 255 / 0.1); /* the hairline under a code panel's bar */
  --code-ok: #6ed9d2; /* a 2xx status inside a code panel */
  --code-ring: #c0e971; /* the focus ring inside a code panel */

  /* syntax: the highlighter's classes (build/highlight.mjs tok-*) on the code tokens */
  --t-key: var(--code-punct);
  --t-str: var(--code-string);
  --t-num: var(--code-number);
  --t-bool: var(--code-keyword);
  --t-null: var(--code-keyword);
  --t-kw: var(--code-keyword);
  --t-com: var(--code-comment);
  --t-punc: var(--code-fg);
  --t-op: var(--code-fg);
  --t-fn: var(--code-fg);
  --t-var: var(--code-fg);

  /* print (docs.css @media print): the page prints dark on white in either theme, code
     included; every colour at 4.5:1 or better on white */
  --print-bg: #ffffff;
  --print-fg: #111111;
  --print-muted: #40424c;
  --print-rule: #c8c9d0;
  --print-key: #8e2410;
  --print-str: #6b4e00;
  --print-num: #8a3a12;
  --print-kw: #34622a;
  --print-com: #5c675d;

  /* HTTP method chips: see "HTTP method chips" below */
  --m-get: #016666;
  --m-post: #2b58a3;
  --m-put: #805208;
  --m-patch: #6c4a9b;
  --m-delete: #a62e12;
  --m-other: #49534a;
  --m-get-d: #6ed9d2;
  --m-post-d: #9cbcf6;
  --m-put-d: #f6b24d;
  --m-patch-d: #c8adef;
  --m-delete-d: #fe8f75;
  --m-other-d: #b3beb3;
}

/* ---------- HTTP method chips ----------
   One colour per method, shown as bold text on a soft tint of itself (docs.css .method;
   maintainer feedback, 2026-10-03: soft tones, bold, more distinct than Signal's outlined
   chips). The light set is for light grounds; the dark set (-d) for the dark theme and for the
   code panels, which are dark on every depth. */
:root[data-theme='dark'],
[data-depth='bedrock'],
[data-depth='deep'],
[data-depth='field'] {
  --m-get: var(--m-get-d);
  --m-post: var(--m-post-d);
  --m-put: var(--m-put-d);
  --m-patch: var(--m-patch-d);
  --m-delete: var(--m-delete-d);
  --m-other: var(--m-other-d);
}

/* ---------- depths: light theme ---------- */

/* the default: reading content (surface-2, white). Contrast on #FFFFFF: fg 17.85, fg-2 8.02,
   fg-3 5.91, link 7.18, ok 5.75; field-bd 3.41. */
:root,
[data-depth='surface-2'] {
  --bg: #ffffff;
  --bg-2: #f1f4ee;
  --bg-3: #e8ede5;
  --fg: #0f1a11;
  --fg-2: #49534a;
  --fg-3: #5c675d;
  --fg-4: #7b877d;
  --fg-dim: #0f1a11;
  --em: #34622a;
  --link: #34622a;
  --hi: #34622a;
  --accent: #34622a;
  --accent-fg: #ffffff;
  --tint: rgb(52 98 42 / 0.08);
  --selection: rgb(52 98 42 / 0.18);
  --rule: rgb(15 26 17 / 0.08);
  --rule-2: rgb(15 26 17 / 0.14);
  --rule-3: rgb(15 26 17 / 0.3);
  --panel: #f6f8f5;
  --panel-2: #f0f4ee;
  --panel-bd: rgb(15 26 17 / 0.07);
  --panel-shadow: 0 1px 2px rgb(15 26 17 / 0.03);
  --shadow-sm: 0 1px 2px rgb(15 26 17 / 0.04);
  --exposure: #b43314;
  --warn: #8f5c0a;
  --amber: #d08a22;
  --ok: #017272;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: #ecf0e9;
  --solid-bg: #34622a;
  --solid-fg: #ffffff;
  --solid-hover: #2b5322;
  --depth-code: #0d1810;
  --depth-code-bd: rgb(15 26 17 / 0.14);
  --logo-fg: #34622a;
  --logo-suffix: #5c675d;
  --field-bd: rgb(15 26 17 / 0.5);
  --scrim: rgb(15 26 17 / 0.4);
  --sheet-shadow: 0 30px 60px -30px rgb(15 26 17 / 0.26);
  color-scheme: light;
}

/* chrome (surface, sage): header, sidebar, drawer, footer. On #F1F4EE: fg-3 5.32, link 6.46. */
[data-depth='surface'] {
  --bg: #f1f4ee;
  --bg-2: #e8ede5;
  --bg-3: #e0e5dc;
  --fg: #0f1a11;
  --fg-2: #49534a;
  --fg-3: #5c675d;
  --fg-4: #7b877d;
  --fg-dim: #0f1a11;
  --em: #34622a;
  --link: #34622a;
  --hi: #34622a;
  --accent: #34622a;
  --accent-fg: #ffffff;
  --tint: rgb(52 98 42 / 0.08);
  --selection: rgb(52 98 42 / 0.18);
  --rule: rgb(15 26 17 / 0.08);
  --rule-2: rgb(15 26 17 / 0.14);
  --rule-3: rgb(15 26 17 / 0.3);
  --panel: #ffffff;
  --panel-2: #f6f8f5;
  --panel-bd: rgb(15 26 17 / 0.07);
  --panel-shadow: 0 1px 2px rgb(15 26 17 / 0.04), 0 20px 44px -30px rgb(15 26 17 / 0.22);
  --shadow-sm: 0 1px 2px rgb(15 26 17 / 0.04);
  --exposure: #b43314;
  --warn: #8f5c0a;
  --amber: #d08a22;
  --ok: #017272;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: #e3e8df;
  --solid-bg: #34622a;
  --solid-fg: #ffffff;
  --solid-hover: #2b5322;
  --depth-code: #0d1810;
  --depth-code-bd: rgb(15 26 17 / 0.14);
  --logo-fg: #34622a;
  --logo-suffix: #5c675d;
  --field-bd: rgb(15 26 17 / 0.5);
  --scrim: rgb(15 26 17 / 0.4);
  --sheet-shadow: 0 30px 60px -30px rgb(15 26 17 / 0.26);
  color-scheme: light;
}

/* deep moss: the reference's code column, the home hero. On #274B23: fg-3 6.77, ok 7.15,
   lime 7.15; field-bd 3.79. */
[data-depth='bedrock'] {
  --bg: #274b23;
  --bg-2: #22441e;
  --bg-3: #1e3d1b;
  --fg: #ffffff;
  --fg-2: rgb(255 255 255 / 0.86);
  --fg-3: rgb(255 255 255 / 0.78);
  --fg-4: rgb(255 255 255 / 0.56);
  --fg-dim: rgb(255 255 255 / 0.66);
  --em: #c0e971;
  --link: #ffffff;
  --hi: #ffffff;
  --accent: #c0e971;
  --accent-fg: #193616;
  --tint: rgb(255 255 255 / 0.12);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.16);
  --rule-2: rgb(255 255 255 / 0.28);
  --rule-3: rgb(255 255 255 / 0.6);
  --panel: rgb(255 255 255 / 0.06);
  --panel-2: rgb(255 255 255 / 0.08);
  --panel-bd: rgb(255 255 255 / 0.16);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #ffb4a4;
  --warn: #ffc976;
  --amber: #e3a13b;
  --ok: #93eae4;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(0 0 0 / 0.2);
  --solid-bg: #ffffff;
  --solid-fg: #193616;
  --solid-hover: #ffffff;
  --depth-code: #112812;
  --depth-code-bd: rgb(255 255 255 / 0.16);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.5);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* near-black green */
[data-depth='deep'] {
  --bg: #0d1810;
  --bg-2: #141f16;
  --bg-3: #1b281d;
  --fg: #e9efe7;
  --fg-2: #b3beb3;
  --fg-3: #96a296;
  --fg-4: #707b70;
  --fg-dim: #899789;
  --em: #c0e971;
  --link: #c0e971;
  --hi: #c0e971;
  --accent: #609743;
  --accent-fg: #0d1810;
  --tint: rgb(192 233 113 / 0.14);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.09);
  --rule-2: rgb(255 255 255 / 0.16);
  --rule-3: rgb(255 255 255 / 0.32);
  --panel: rgb(255 255 255 / 0.04);
  --panel-2: rgb(255 255 255 / 0.07);
  --panel-bd: rgb(255 255 255 / 0.1);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #fe7b5f;
  --warn: #f6b24d;
  --amber: #e3a13b;
  --ok: #6ed9d2;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(255 255 255 / 0.08);
  --solid-bg: #ffffff;
  --solid-fg: #0d1810;
  --solid-hover: #ffffff;
  --depth-code: #081009;
  --depth-code-bd: rgb(255 255 255 / 0.1);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.4);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* the closing card (deep moss, white carrying words): the same in both themes */
[data-depth='field'] {
  --bg: #274b23;
  --bg-2: #22441e;
  --bg-3: #1e3d1b;
  --fg: #ffffff;
  --fg-2: rgb(255 255 255 / 0.82);
  --fg-3: rgb(255 255 255 / 0.66);
  --fg-4: rgb(255 255 255 / 0.56);
  --fg-dim: rgb(255 255 255 / 0.66);
  --em: #ffffff;
  --link: #ffffff;
  --hi: #ffffff;
  --accent: #ffffff;
  --accent-fg: #193616;
  --tint: rgb(255 255 255 / 0.12);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.18);
  --rule-2: rgb(255 255 255 / 0.3);
  --rule-3: rgb(255 255 255 / 0.6);
  --panel: rgb(255 255 255 / 0.06);
  --panel-2: rgb(255 255 255 / 0.08);
  --panel-bd: rgb(255 255 255 / 0.16);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #ffb4a4;
  --warn: #ffc976;
  --amber: #e3a13b;
  --ok: #93eae4;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(0 0 0 / 0.2);
  --solid-bg: #ffffff;
  --solid-fg: #193616;
  --solid-hover: #ffffff;
  --depth-code: #112812;
  --depth-code-bd: rgb(255 255 255 / 0.16);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.5);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ---------- depths: dark theme (the deep depth for the whole site) ---------- */

/* reading content, and the white layers (palette, menus, popover) */
:root[data-theme='dark'],
:root[data-theme='dark'] [data-depth='surface-2'] {
  --bg: #0d1810;
  --bg-2: #141f16;
  --bg-3: #1b281d;
  --fg: #e9efe7;
  --fg-2: #b3beb3;
  --fg-3: #96a296;
  --fg-4: #707b70;
  --fg-dim: #899789;
  --em: #c0e971;
  --link: #c0e971;
  --hi: #c0e971;
  --accent: #609743;
  --accent-fg: #0d1810;
  --tint: rgb(192 233 113 / 0.14);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.09);
  --rule-2: rgb(255 255 255 / 0.16);
  --rule-3: rgb(255 255 255 / 0.32);
  --panel: rgb(255 255 255 / 0.04);
  --panel-2: rgb(255 255 255 / 0.07);
  --panel-bd: rgb(255 255 255 / 0.1);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #fe7b5f;
  --warn: #f6b24d;
  --amber: #e3a13b;
  --ok: #6ed9d2;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(255 255 255 / 0.08);
  --solid-bg: #ffffff;
  --solid-fg: #0d1810;
  --solid-hover: #ffffff;
  --depth-code: #081009;
  --depth-code-bd: rgb(255 255 255 / 0.1);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.4);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* dark chrome: one step lighter than the content (deep's bg-2), as the sage chrome is one
   step darker than white in the light theme. On #141F16: fg 14.5, fg-3 6.4, ok 10.1. */
:root[data-theme='dark'] [data-depth='surface'] {
  --bg: #141f16;
  --bg-2: #1b281d;
  --bg-3: #223125;
  --fg: #e9efe7;
  --fg-2: #b3beb3;
  --fg-3: #96a296;
  --fg-4: #707b70;
  --fg-dim: #899789;
  --em: #c0e971;
  --link: #c0e971;
  --hi: #c0e971;
  --accent: #609743;
  --accent-fg: #0d1810;
  --tint: rgb(192 233 113 / 0.14);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.09);
  --rule-2: rgb(255 255 255 / 0.16);
  --rule-3: rgb(255 255 255 / 0.32);
  --panel: rgb(255 255 255 / 0.04);
  --panel-2: rgb(255 255 255 / 0.07);
  --panel-bd: rgb(255 255 255 / 0.1);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #fe7b5f;
  --warn: #f6b24d;
  --amber: #e3a13b;
  --ok: #6ed9d2;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(255 255 255 / 0.08);
  --solid-bg: #ffffff;
  --solid-fg: #0d1810;
  --solid-hover: #ffffff;
  --depth-code: #081009;
  --depth-code-bd: rgb(255 255 255 / 0.1);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.4);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* the code column at night: "night moss" #112812 (Signal's code panel on bedrock), code
   panels #081009. Bedrock's own #274B23 would be the brightest surface on a dark page and
   pull the eye from the content (§0). On #112812: fg-2 8.2, fg-3 5.9, lime 11.3. */
:root[data-theme='dark'] [data-depth='bedrock'] {
  --bg: #112812;
  --bg-2: #0c200e;
  --bg-3: #081809;
  --fg: #e9efe7;
  --fg-2: #b3beb3;
  --fg-3: #96a296;
  --fg-4: #707b70;
  --fg-dim: #899789;
  --em: #c0e971;
  --link: #c0e971;
  --hi: #c0e971;
  --accent: #c0e971;
  --accent-fg: #0d1810;
  --tint: rgb(192 233 113 / 0.14);
  --selection: rgb(192 233 113 / 0.3);
  --rule: rgb(255 255 255 / 0.12);
  --rule-2: rgb(255 255 255 / 0.2);
  --rule-3: rgb(255 255 255 / 0.4);
  --panel: rgb(255 255 255 / 0.05);
  --panel-2: rgb(255 255 255 / 0.08);
  --panel-bd: rgb(255 255 255 / 0.12);
  --panel-shadow: none;
  --shadow-sm: none;
  --exposure: #fe7b5f;
  --warn: #f6b24d;
  --amber: #e3a13b;
  --ok: #6ed9d2;
  --state-open: var(--exposure);
  --state-wait: var(--warn);
  --state-done: var(--ok);
  --state-closed: var(--fg-3);
  --code-bg: rgb(255 255 255 / 0.08);
  --solid-bg: #ffffff;
  --solid-fg: #0d1810;
  --solid-hover: #ffffff;
  --depth-code: #081009;
  --depth-code-bd: rgb(255 255 255 / 0.1);
  --logo-fg: #ffffff;
  --logo-suffix: rgb(255 255 255 / 0.78);
  --field-bd: rgb(255 255 255 / 0.4);
  --scrim: rgb(0 0 0 / 0.6);
  --sheet-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ---------- the earlier names, as aliases of Signal's ----------
   On :root and on every depth, so each resolves against that depth's values. New and
   rewritten rules use the Signal names; untouched rules keep working on these. */
:root,
[data-depth] {
  --c-bg: var(--bg);
  --c-bg-subtle: var(--bg-2);
  --c-bg-muted: var(--bg-3);
  --c-surface: var(--panel);
  --c-border: var(--rule);
  --c-border-strong: var(--rule-2);
  --c-text: var(--fg);
  --c-text-muted: var(--fg-2);
  --c-text-subtle: var(--fg-3);
  --c-text-faint: var(--fg-3); /* not fg-4: it carries text (AA) */
  --c-sidebar-bg: var(--bg);
  --c-sidebar-hover: var(--panel);

  --c-accent: var(--hi);
  --c-accent-hover: var(--hi);
  --c-accent-soft: var(--tint);
  --c-accent-soft-2: var(--selection);
  --c-accent-contrast: var(--accent-fg);
  --c-ring: var(--accent);
  --c-overlay: var(--scrim);

  /* links: the depth's --link, the weight of the text around it, an underline that is always
     there (currentColor at 40%), full colour and 2px on hover in prose */
  --link-hover: var(--link);
  --link-weight: inherit;
  --link-underline: color-mix(in srgb, currentColor 40%, transparent);
  --link-thickness: 1px;
  --link-thickness-hover: 2px;
  --link-offset: 0.2em;

  /* the environment switch's Demo state: no status colour (Demo is not a state) */
  --c-env-alt: var(--fg);
  --c-env-alt-bg: var(--panel);
  --c-env-alt-bd: var(--rule-3);

  /* states are outlined; an error is a word and a triangle, never the exposure colour */
  --c-success: var(--ok);
  --c-success-bg: transparent;
  --c-success-bd: var(--ok);
  --c-warning: var(--warn);
  --c-warning-bg: transparent;
  --c-warning-bd: var(--warn);
  --c-danger: var(--fg);
  --c-danger-bg: var(--panel);
  --c-danger-bd: var(--rule-3);
  --c-info: var(--fg-2);
  --c-info-bg: var(--panel);
  --c-info-bd: var(--rule-2);
  --c-required: var(--hi);

  /* HTTP methods: tokens.css "HTTP method chips" (depth-independent) */

  /* code panels: the bar sits on the panel's own ground, with a hairline under it */
  --c-code-bg: var(--depth-code);
  --c-code-surface: var(--depth-code);
  --c-code-head: var(--depth-code);
  --c-code-raised: var(--code-tab-on);
  --c-code-line: var(--code-rule);
  --c-code-text: var(--code-fg);
  --c-code-muted: var(--code-tab);
  --c-code-dim: var(--code-comment);
  --c-code-accent: var(--code-ring);
  --c-code-hl-bar: var(--code-ring);
  --c-code-hl-bg: rgb(192 233 113 / 0.12);
  --c-ref-col-bg: var(--bg); /* on the bedrock column: the column's own ground */
  --c-ref-card-bg: var(--depth-code);
  --c-ref-col-dim: var(--fg-3); /* Try It placeholders: fg-3, never fg-4 */

  --shadow: var(--panel-shadow);
}

/* ---------- code panels ----------
   A code panel is near-black green on every depth: inside it the focus ring is lime, a 2xx
   status teal and a selection lime, whatever the band around it. The aliases that read those
   tokens are declared again here, so they resolve against the panel's values. */
.code-block,
.code-panel,
.ref-card,
.ref-tryit,
.home-qs {
  --accent: var(--code-ring);
  --ok: var(--code-ok);
  --c-ring: var(--accent);
  --c-success: var(--ok);
  --c-success-bd: var(--ok);
  --m-get: var(--ok);
  --m-get-bd: var(--ok);
  --selection: rgb(192 233 113 / 0.3);
  --c-accent-soft-2: var(--selection);
  color-scheme: dark;
}