/* theme.css -- Design tokens, colour scales, dark mode, corner-shape values
   Part of the site stylesheet, split out of the former single
   site.css. Load order is significant and is fixed in
   src/view/layout.php -- theme first (tokens), then base, then
   layout, then components. Rules were moved verbatim, in their
   original order, so the cascade is unchanged. */

:root {
    /* Measured, not guessed -- .site-header's real rendered height
       (34px logo + 22px/17px nav links + their padding). Every
       calc(100dvh - <header>) below must reference this, not a
       hardcoded number, or it silently drifts out of sync the next
       time header content changes. */
    --header-height: 99px;
    /* Was cubic-bezier(0.32, 0.72, 0, 1) (an "iOS sheet curve"
       approximation cited across web-dev writeups) -- measured against
       an actual screen recording of the transition and it front-loads
       WAY too hard: at just 20% of a 300ms transition (60ms) it's
       already 66% of the way there, at 33% (100ms) it's 87.5% done.
       The remaining 200ms then creeps an imperceptible last 12%,
       reading as "pops into place, then nothing" rather than a genuine
       glide -- exactly the "nicht immer smooth" complaint. Plain
       ease-out (the browser's own standard curve, cubic-bezier(0, 0,
       0.58, 1)) paces much more evenly across the full duration (16%,
       31%, 48%, 68%, 87%, 100% at the same checkpoints) -- a real,
       perceptible motion the whole time, and a well-defined standard
       instead of an unverified custom guess. */
    --sheet-ease: ease-out;
    /* Single source of truth for the stack-navigation transition's own
       timing -- sheet-navigation.js reads these same two values back
       (getComputedStyle) instead of hardcoding its own ms constants, so
       the two can never drift out of sync. .debug-animation (below)
       overrides both to run the whole thing in slow motion for visual
       verification, without touching a single duration value twice. */
    --sheet-transition-duration: 0.3s;
    --sheet-stagger-delay: 0.1s;
    --black: #141414;
    --white: #FFFFFF;
    --smoke: #E7E7E7;
    --night: #141414;
    --focus: #137CEC;
    --black-a10: rgba(0, 0, 0, 0.02);
    --black-a9: rgba(0, 0, 0, 0.04);
    --black-a8: rgba(0, 0, 0, 0.06);
    --black-a7: rgba(0, 0, 0, 0.08);
    --black-a6: rgba(0, 0, 0, 0.1);
    --black-a5: rgba(0, 0, 0, 0.12);
    --black-a4: rgba(0, 0, 0, 0.14);
    --black-a3: rgba(0, 0, 0, 0.16);
    --black-a2: rgba(0, 0, 0, 0.2);
    --black-a1: rgba(0, 0, 0, 0.4);
    --black-a0: rgba(0, 0, 0, 0.45);
    --black-base: rgba(0, 0, 0, 0.5);
    --black-b0: rgba(0, 0, 0, 0.55);
    --black-b1: rgba(0, 0, 0, 0.6);
    --black-b2: rgba(0, 0, 0, 0.74);
    --black-b3: rgba(0, 0, 0, 0.77);
    --black-b4: rgba(0, 0, 0, 0.79);
    --black-b5: rgba(0, 0, 0, 0.81);
    --black-b6: rgba(0, 0, 0, 0.83);
    --black-b7: rgba(0, 0, 0, 0.85);
    --black-b8: rgba(0, 0, 0, 0.87);
    --black-b9: rgba(0, 0, 0, 0.89);
    --black-b10: rgba(0, 0, 0, 0.9);
    --white-a10: rgba(255, 255, 255, 0.02);
    --white-a9: rgba(255, 255, 255, 0.04);
    --white-a8: rgba(255, 255, 255, 0.06);
    --white-a7: rgba(255, 255, 255, 0.08);
    --white-a6: rgba(255, 255, 255, 0.1);
    --white-a5: rgba(255, 255, 255, 0.12);
    --white-a4: rgba(255, 255, 255, 0.14);
    --white-a3: rgba(255, 255, 255, 0.16);
    --white-a2: rgba(255, 255, 255, 0.2);
    --white-a1: rgba(255, 255, 255, 0.4);
    --white-a0: rgba(255, 255, 255, 0.45);
    --white-base: rgba(255, 255, 255, 0.5);
    --white-b0: rgba(255, 255, 255, 0.55);
    --white-b1: rgba(255, 255, 255, 0.6);
    --white-b2: rgba(255, 255, 255, 0.74);
    --white-b3: rgba(255, 255, 255, 0.77);
    --white-b4: rgba(255, 255, 255, 0.79);
    --white-b5: rgba(255, 255, 255, 0.81);
    --white-b6: rgba(255, 255, 255, 0.83);
    --white-b7: rgba(255, 255, 255, 0.85);
    --white-b8: rgba(255, 255, 255, 0.87);
    --white-b9: rgba(255, 255, 255, 0.89);
    --white-b10: rgba(255, 255, 255, 0.9);
    --gray-a10: #FAFAFA;
    --gray-a9: #F5F5F5;
    --gray-a8: #F0F0F0;
    --gray-a7: #EBEBEB;
    --gray-a6: #E5E5E5;
    --gray-a5: #E0E0E0;
    --gray-a4: #DBDBDB;
    --gray-a3: #D6D6D6;
    --gray-a2: #CCCCCC;
    --gray-a1: #999999;
    --gray-a0: #8C8C8C;
    --gray-base: #808080;
    --gray-b0: #737373;
    --gray-b1: #666666;
    --gray-b2: #434343;
    --gray-b3: #3A3A3A;
    --gray-b4: #353535;
    --gray-b5: #303030;
    --gray-b6: #2C2C2C;
    --gray-b7: #272727;
    --gray-b8: #222222;
    --gray-b9: #1D1D1D;
    --gray-b10: #191919;
    --indigo-a10: #F6F6FF;
    --indigo-a9: #ECECFF;
    --indigo-a8: #E3E3FF;
    --indigo-a7: #DCDCFF;
    --indigo-a6: #D5D5FF;
    --indigo-a5: #CBCBFF;
    --indigo-a4: #C4C4FF;
    --indigo-a3: #B8B8FF;
    --indigo-a2: #A9A9FF;
    --indigo-a1: #9999FF;
    --indigo-a0: #8080FF;
    --indigo-base: #2020F3;
    --indigo-b0: #1E1EC6;
    --indigo-b1: #1C1CB0;
    --indigo-b2: #1A1A83;
    --indigo-b3: #191978;
    --indigo-b4: #19196D;
    --indigo-b5: #181862;
    --indigo-b6: #181857;
    --indigo-b7: #161641;
    --indigo-b8: #161635;
    --indigo-b9: #15152A;
    --indigo-b10: #15151F;
    --red-a10: #FFF5F5;
    --red-a9: #FFEAEA;
    --red-a8: #FFDFDF;
    --red-a7: #FFD7D7;
    --red-a6: #FFCFCF;
    --red-a5: #FFC4C4;
    --red-a4: #FFBCBC;
    --red-a3: #FFB0B0;
    --red-a2: #FF9D9D;
    --red-a1: #FF7B7B;
    --red-a0: #FF6060;
    --red-base: #DC1818;
    --red-b0: #C10A0A;
    --red-b1: #AE0909;
    --red-b2: #781616;
    --red-b3: #6E1616;
    --red-b4: #641616;
    --red-b5: #5A1515;
    --red-b6: #501515;
    --red-b7: #3C1515;
    --red-b8: #321515;
    --red-b9: #281414;
    --red-b10: #1E1414;
    --blue-a10: #F4F9FF;
    --blue-a9: #E9F2FF;
    --blue-a8: #DEECFF;
    --blue-a7: #D6E6FF;
    --blue-a6: #CDE2FF;
    --blue-a5: #C3DBFF;
    --blue-a4: #BAD7FF;
    --blue-a3: #ACCFFF;
    --blue-a2: #99C4FF;
    --blue-a1: #76AEFF;
    --blue-a0: #5A9FFF;
    --blue-base: #0062EB;
    --blue-b0: #0051C4;
    --blue-b1: #004AB0;
    --blue-b2: #0A3B80;
    --blue-b3: #0B3775;
    --blue-b4: #0C336A;
    --blue-b5: #0D2F5F;
    --blue-b6: #0E2B55;
    --blue-b7: #10243F;
    --blue-b8: #112034;
    --blue-b9: #121C2A;
    --blue-b10: #13181F;
    --green-a10: #F4FBF7;
    --green-a9: #E9F8EC;
    --green-a8: #DEF4E4;
    --green-a7: #D6F1DC;
    --green-a6: #CDEFD6;
    --green-a5: #C2EBCC;
    --green-a4: #BAE8C5;
    --green-a3: #ADE3B9;
    --green-a2: #99DDAB;
    --green-a1: #75D18C;
    --green-a0: #5AC876;
    --green-base: #0F802B;
    --green-b0: #106A26;
    --green-b1: #116024;
    --green-b2: #124A20;
    --green-b3: #12451E;
    --green-b4: #123F1D;
    --green-b5: #123A1C;
    --green-b6: #13341B;
    --green-b7: #132A19;
    --green-b8: #132417;
    --green-b9: #141F16;
    --green-b10: #141915;
    --yellow-a10: #FFFDF7;
    --yellow-a9: #FFFCF1;
    --yellow-a8: #FFF3CD;
    --yellow-a7: #FFF0BF;
    --yellow-a6: #FFECAF;
    --yellow-a5: #FFEAA5;
    --yellow-a4: #FFE89C;
    --yellow-a3: #FFE592;
    --yellow-a2: #FFE388;
    --yellow-a1: #FFE17E;
    --yellow-a0: #FFDF74;
    --yellow-base: #FFD138;
    --yellow-b0: #CB3300;
    --yellow-b1: #AF2C00;
    --yellow-b2: #7E3B24;
    --yellow-b3: #723622;
    --yellow-b4: #663221;
    --yellow-b5: #5B2E1F;
    --yellow-b6: #4F2A1D;
    --yellow-b7: #43251B;
    --yellow-b8: #372119;
    --yellow-b9: #2C1D18;
    --yellow-b10: #201916;
    --backdrop: hsla(0, 0%, 0%, 0.45);
    --border-shadow: rgba(0, 0, 0, 0.25);
    --bg-base: var(--white);
    --bg-raised: var(--white);
    --bg-overlay: var(--white);
    --bg-input: var(--white);
    --bg-input-on: var(--black);
    --bg-input-off: var(--black-a5);
    --bg-input-focus: var(--white);
    --bg-input-disabled: var(--black-a8);
    --fg-placeholder: var(--black-base);
    --fg-input-on: var(--white);
    --border-input: var(--black-a5);
    --border-focus: var(--focus);
    --border-input-focus: var(--focus);
    --fg-primary-accent: var(--indigo-base);
    --fg-primary-body: var(--indigo-b0);
    --bg-primary-section: var(--indigo-a9);
    --bg-primary-surface: var(--indigo-a8);
    --bg-primary-state: var(--indigo-a6);
    --bg-primary-accent: var(--indigo-base);
    --bg-primary-accent-hover: var(--indigo-b0);
    --border-primary-default: var(--indigo-a6);
    --border-primary-strong: var(--indigo-a3);
    --border-primary-accent: var(--indigo-base);
    --fg-info-accent: var(--blue-base);
    --fg-info-body: var(--blue-b0);
    --bg-info-section: var(--blue-a9);
    --bg-info-surface: var(--blue-a8);
    --bg-info-state: var(--blue-a6);
    --bg-info-accent: var(--blue-base);
    --bg-info-accent-hover: var(--blue-b0);
    --border-info-default: var(--blue-a6);
    --border-info-strong: var(--blue-a3);
    --border-info-accent: var(--blue-base);
    --fg-negative-accent: var(--red-base);
    --fg-negative-body: var(--red-b0);
    --bg-negative-section: var(--red-a9);
    --bg-negative-surface: var(--red-a8);
    --bg-negative-state: var(--red-a6);
    --bg-negative-accent: var(--red-base);
    --bg-negative-accent-hover: var(--red-b0);
    --border-negative-default: var(--red-a6);
    --border-negative-strong: var(--red-a3);
    --border-negative-accent: var(--red-base);
    --fg-positive-accent: var(--green-base);
    --fg-positive-body: var(--green-b0);
    --bg-positive-section: var(--green-a9);
    --bg-positive-surface: var(--green-a8);
    --bg-positive-state: var(--green-a6);
    --bg-positive-accent: var(--green-base);
    --bg-positive-accent-hover: var(--green-b0);
    --border-positive-default: var(--green-a6);
    --border-positive-strong: var(--green-a3);
    --border-positive-accent: var(--green-base);
    --fg-notice-accent: var(--yellow-b0);
    --fg-notice-body: var(--yellow-b1);
    --bg-notice-section: var(--yellow-a9);
    --bg-notice-surface: var(--yellow-a8);
    --bg-notice-state: var(--yellow-a6);
    --bg-notice-accent: var(--yellow-base);
    --bg-notice-accent-hover: var(--yellow-a0);
    --border-notice-default: var(--yellow-a6);
    --border-notice-strong: var(--yellow-a3);
    --border-notice-accent: var(--yellow-b0);
    --fg-neutral-accent: var(--black);
    --fg-neutral-body: var(--gray-b6);
    --fg-neutral-subtle: var(--gray-b1);
    --fg-neutral-minimal: var(--gray-b0);
    --fg-neutral-muted: var(--gray-base);
    --bg-neutral-base: var(--gray-a10);
    --bg-neutral-section: var(--gray-a9);
    --bg-neutral-surface: var(--gray-a8);
    --bg-neutral-state: var(--gray-a6);
    --bg-neutral-accent: var(--black);
    --bg-neutral-accent-hover: var(--gray-b3);
    --border-neutral-subtle: var(--gray-a8);
    --border-neutral-default: var(--gray-a6);
    --border-neutral-strong: var(--gray-a3);
    --border-neutral-accent: var(--black);
    --fg-inverse-accent: var(--white);
    --fg-inverse-body: var(--gray-a3);
    --fg-inverse-subtle: var(--gray-a1);
    --fg-inverse-minimal: var(--gray-a0);
    --fg-inverse-muted: var(--gray-base);
    --bg-inverse-base: var(--gray-b10);
    --bg-inverse-section: var(--gray-b9);
    --bg-inverse-surface: var(--gray-b8);
    --bg-inverse-state: var(--gray-b6);
    --bg-inverse-accent: var(--white);
    --bg-inverse-accent-hover: var(--gray-a3);
    --border-inverse-subtle: var(--gray-b8);
    --border-inverse-default: var(--gray-b6);
    --border-inverse-strong: var(--gray-b3);
    --border-inverse-accent: var(--white);
    --fg-dark-accent: var(--black);
    --fg-dark-body: var(--black-b6);
    --fg-dark-subtle: var(--black-b1);
    --fg-dark-minimal: var(--black-b0);
    --fg-dark-muted: var(--black-base);
    --bg-dark-base: var(--black-a10);
    --bg-dark-section: var(--black-a9);
    --bg-dark-surface: var(--black-a8);
    --bg-dark-state: var(--black-a6);
    --bg-dark-accent: var(--black);
    --bg-dark-accent-hover: var(--black-b3);
    --border-dark-subtle: var(--black-a8);
    --border-dark-default: var(--black-a6);
    --border-dark-strong: var(--black-a3);
    --border-dark-accent: var(--black);
    --fg-light-accent: var(--white);
    --fg-light-body: var(--white-b6);
    --fg-light-subtle: var(--white-b1);
    --fg-light-minimal: var(--white-b0);
    --fg-light-muted: var(--white-base);
    --bg-light-base: var(--white-a10);
    --bg-light-section: var(--white-a9);
    --bg-light-surface: var(--white-a8);
    --bg-light-state: var(--white-a6);
    --bg-light-accent: var(--white);
    --bg-light-accent-hover: var(--white-b3);
    --border-light-subtle: var(--white-a8);
    --border-light-default: var(--white-a6);
    --border-light-strong: var(--white-a3);
    --border-light-accent: var(--white);
    --fg-black-accent: var(--black);
    --fg-black-body: var(--black-b6);
    --fg-black-subtle: var(--black-b1);
    --fg-black-minimal: var(--black-b0);
    --fg-black-muted: var(--black-base);
    --bg-black-base: var(--black-a10);
    --bg-black-section: var(--black-a9);
    --bg-black-surface: var(--black-a8);
    --bg-black-state: var(--black-a6);
    --bg-black-accent: var(--black);
    --bg-black-accent-hover: var(--black-b3);
    --border-black-subtle: var(--black-a8);
    --border-black-default: var(--black-a6);
    --border-black-strong: var(--black-a3);
    --border-black-accent: var(--black);
    --fg-white-accent: var(--white);
    --fg-white-body: var(--white-b6);
    --fg-white-subtle: var(--white-b1);
    --fg-white-minimal: var(--white-b0);
    --fg-white-muted: var(--white-base);
    --bg-white-base: var(--white-a10);
    --bg-white-section: var(--white-a9);
    --bg-white-surface: var(--white-a8);
    --bg-white-state: var(--white-a6);
    --bg-white-accent: var(--white);
    --bg-white-accent-hover: var(--white-b3);
    --border-white-subtle: var(--white-a8);
    --border-white-default: var(--white-a6);
    --border-white-strong: var(--white-a3);
    --border-white-accent: var(--white);
    --black: #000;
    --bg-onahau: #C6EDFE;
    --bg-drover: #FAF7AE;
    --bg-pear: #E0FB49;
    --border-onahau: #C6EDFE;
    --font-body: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-heading: inherit;
    --font-logo: Manuale, Georgia, "Times New Roman", serif;
    --font-mono: monospace;
    --body-font-size: var(--text-size-body);
    --body-line-height: 1.5;
    --body-color: var(--fg-dark-body);
    --text-size-display: clamp(18px, 2vw, 24px);
    --text-size-lead: clamp(18px, 2vw, 20px);
    --text-size-large: 18px;
    --text-size-body: 16px;
    --text-size-label: 14px;
    --text-size-small: 12px;
    --text-size-micro: 11px;
    --text-size-detail: 13px;
    --link-line: underline;
    --link-color: var(--fg-info-body);
    --link-hover-color: var(--fg-negative-body);
    --heading-weight: 700;
    --heading-leading: 1.2;
    --heading-tracking: -0.02em;
    --heading-size-h0: clamp(42px, 5vw, 60px);
    --heading-size-h1: clamp(36px, 5vw, 48px);
    --heading-size-h2: clamp(28px, 4vw, 40px);
    --heading-size-h3: clamp(22px, 3.5vw, 32px);
    --heading-size-h4: clamp(20px, 3vw, 24px);
    --heading-size-h5: clamp(18px, 2.5vw, 20px);
    --heading-size-h6: clamp(16px, 2.5vw, 16px);
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-heavy: 900;
    --rounded-full: 9999px;
    --rounded-sm: 3px;
    --rounded: 6px;
    --rounded-lg: 9px;
    --rounded-xl: 12px;
    /* Squircle (corner-shape: squircle, Chrome 139+) needs double the
       border-radius to visually match the same roundness as a plain
       circular corner (confirmed via the property's own author --
       https://orgpad.info/blog/squircles). --brm ("border-radius
       multiplier") stays 1 in browsers without corner-shape support,
       so border-radius: calc(Npx * var(--brm)) degrades cleanly to
       the original circular radius there. */
    --brm: 1;
    /* THE SHAPE, declared once and read twice. `corner-shape` itself is invisible to script in a
       browser that lacks the property -- an unknown declaration is dropped at parse time -- so the
       value lives in a custom property and the real property takes it from there. corner.js reads
       the custom one, the browser reads the real one, and neither can drift from the other. */
    --corner-shape: squircle;
    /* "Apple" corner-shape variant -- superellipse(5), the historically
       best-known approximation of the real iOS icon curve (Marc
       Edwards' original n=5 hypothesis). NOT an exact reproduction --
       Apple's real curve is a bespoke Bezier construction, not any
       single superellipse exponent (confirmed via Figma's own
       deep-dive, which explicitly found "for all choices of n... a
       small but systematic discrepancy" -- see
       https://www.figma.com/blog/desperately-seeking-squircles/). Use
       via the .corner-apple class below instead of plain "squircle"
       wherever this specific flavor is wanted. */
    --corner-shape-apple: superellipse(5);
    --spacing-1: clamp(3px, 0.5vw, 4px);
    --spacing-2: clamp(6px, 1vw, 8px);
    --spacing-3: clamp(9px, 1.5vw, 12px);
    --spacing-4: clamp(12px, 2vw, 16px);
    --spacing-5: clamp(16px, 2.5vw, 20px);
    --spacing-6: clamp(18px, 3vw, 24px);
    --spacing-8: clamp(24px, 4vw, 32px);
    --spacing-10: clamp(30px, 5vw, 40px);
    --spacing-12: clamp(36px, 6vw, 48px);
    --spacing-15: clamp(45px, 7.4vw, 60px);
    --spacing-20: clamp(60px, 10vw, 80px);
    --container-xxl: 1280px;
    --container-xl: 1280px;
    --container-lg: 968px;
    --container-md: 808px;
    --container-sm: 712px;
    --prose-width: 68ch;
    --shadow-sm: 0 0 1px 0 var(--border-shadow), 0 1px 1px -0.5px rgba(0, 0, 0, 0.07), 0 3px 3px -1.5px rgba(0, 0, 0, 0.07);
    /* Bigger offsets/blur AND higher opacity than --shadow-sm (0.12 vs
       0.07) -- .sheet/.sheet-backdrop need to read as clearly elevated
       against --bg-neutral-section, and a subtle shadow barely shows at
       all against the near-black backgrounds dark mode uses. */
    --shadow-md: 0 0 1px 0 var(--border-shadow), 0 2px 4px -1px rgba(0, 0, 0, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.12);
    --control-size-md: 40px;
    --control-size-lg: 48px;
    --button-padding-md: 12px;
    --button-padding-lg: 20px;
    --input-padding-md: 10px;
    --button-font-size: var(--text-size-label);
    --button-font-weight: var(--weight-medium);
    --button-border-radius: var(--rounded);
    --button-height: var(--control-size-md);
    --badge-font-size: var(--text-size-small);
    --badge-font-weight: var(--weight-medium);
    --badge-padding: 0.5em 0.6em;
    --badge-border-radius: var(--rounded-sm);
    --input-font-size: var(--text-size-label);
    --input-border-radius: var(--rounded);
    --input-height: var(--control-size-md);
    --snippet-border-radius: var(--rounded);
}

@supports (corner-shape: squircle) {
    :root {
        --brm: 2;
    }
}

/* Opt-in utility: swaps an element's corner-shape from the default
   squircle to the --corner-shape-apple variant (see its own definition
   above). Doesn't touch border-radius/--brm -- both variants use the
   same doubled radius, no separate multiplier defined for this one. */
.corner-apple {
    --corner-shape: var(--corner-shape-apple);
    corner-shape: var(--corner-shape);
}

/* Apple's real "continuous corner" (arc + Bezier ramps, not a
   superellipse) has no native CSS equivalent -- no corner-shape value
   can express it, so assets/js/corner-shape.js ALWAYS draws this one
   via clip-path, in every browser, not just as a fallback. This rule
   is only the no-JS graceful degradation: falls back to the regular
   squircle if JavaScript is ever disabled. */
.corner-continuous {
    /* `continuous` is not a real corner-shape value, which is the point: the browser cannot parse it
       and falls back to the squircle below, and corner.js -- the only reader of the custom property
       -- draws the curve no CSS value expresses. One declaration, both paths. */
    --corner-shape: continuous;
    corner-shape: squircle;
}

/* Dark values apply two ways: automatically via prefers-color-scheme
   (unless the manual toggle below has forced light), or unconditionally
   via [data-theme="dark"] once someone clicks "dark" in that toggle
   (src/view/layout.php sets/clears the attribute + persists the choice
   to localStorage). "System" (the default) means no attribute is set
   at all, so only the media query applies -- exactly the old behavior.
   The two selectors below intentionally repeat the same declarations
   (plain CSS has no mixin to share them) -- keep them in sync. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-base: var(--night);
        --bg-raised: var(--gray-b10);
        --bg-input: var(--night);
        --border-input: var(--white-a5);
        --fg-neutral-accent: var(--smoke);
        --fg-neutral-body: var(--gray-a3);
        --bg-neutral-base: var(--gray-b10);
        --bg-neutral-section: var(--gray-b9);
        --bg-neutral-surface: var(--gray-b8);
        --bg-neutral-state: var(--gray-b6);
        --bg-neutral-accent: var(--smoke);
        --bg-neutral-accent-hover: var(--gray-a3);
        /* .button's background flips light in dark mode (--bg-neutral-
           accent above), but its text color wasn't following -- white
           text on a near-white button was unreadable. Only consumer of
           --fg-inverse-accent is .button, so this is safe to flip. */
        --fg-inverse-accent: var(--black);
        --border-neutral-subtle: var(--gray-b8);
        --border-neutral-default: var(--gray-b6);
        --border-neutral-strong: var(--gray-b3);
        --border-neutral-accent: var(--smoke);
        --fg-dark-accent: var(--smoke);
        --fg-dark-body: var(--white-b6);
        --fg-dark-subtle: var(--white-b1);
        --fg-info-body: var(--blue-a0);
        --bg-info-section: var(--blue-b9);
        --fg-negative-body: var(--red-a0);
        --bg-input-on: var(--smoke);
        --fg-input-on: var(--black);
    }
}

:root[data-theme="dark"] {
    --bg-base: var(--night);
    --bg-raised: var(--gray-b10);
    --bg-input: var(--night);
    --border-input: var(--white-a5);
    --fg-neutral-accent: var(--smoke);
    --fg-neutral-body: var(--gray-a3);
    --bg-neutral-base: var(--gray-b10);
    --bg-neutral-section: var(--gray-b9);
    --bg-neutral-surface: var(--gray-b8);
    --bg-neutral-state: var(--gray-b6);
    --bg-neutral-accent: var(--smoke);
    --bg-neutral-accent-hover: var(--gray-a3);
    --fg-inverse-accent: var(--black);
    --border-neutral-subtle: var(--gray-b8);
    --border-neutral-default: var(--gray-b6);
    --border-neutral-strong: var(--gray-b3);
    --border-neutral-accent: var(--smoke);
    --fg-dark-accent: var(--smoke);
    --fg-dark-body: var(--white-b6);
    --fg-dark-subtle: var(--white-b1);
    --fg-info-body: var(--blue-a0);
    --bg-info-section: var(--blue-b9);
    --fg-negative-body: var(--red-a0);
    --bg-input-on: var(--smoke);
    --fg-input-on: var(--black);
}