/* benbox — Greige. Generated by city/tools/export_brand.py; do not hand-edit.
   warm grey, no brown. Every value below clears WCAG AA against the surface it is used on;
   the ratios are in greige.json. Live state is PRESENCE, not hue — see --run. */

:root {
  --bb-paper: #F2F0EC;            /* page background */
  --bb-surface: #E9E7E3;          /* cards, table zebra, inputs */
  --bb-surface2: #E0DEDA;         /* code blocks, raised panels, wells */
  --bb-sunken: #EEECE8;           /* recessed strips, table headers */
  --bb-hover: #DDDBD7;            /* row and button hover fill */
  --bb-ink: #1A1917;              /* all primary text, the mark */
  --bb-muted: #615E58;            /* secondary text, captions, axis labels */
  --bb-rule: #DEDBD4;             /* every hairline and border */
  --bb-run: #3F3B34;              /* the live state — dot, link, small marks */
  --bb-runfill: #3F3B34;          /* accent as a solid fill (buttons, chips) with onrun text */
  --bb-onrun: #F2F0EC;            /* text sitting on an accent fill */
  --bb-onink: #F2F0EC;            /* text sitting on an ink fill */
  --bb-focus: #3F3B34;            /* focus ring */
  --bb-select: #C7C5C0;           /* text selection highlight */
  --bb-scrim: #3E3E3D;            /* modal backdrop */
  --bb-danger: #78362F;           /* errors, destructive actions, down services */
  --bb-warn: #6B4400;             /* degraded services, warnings */
  --bb-info: #1D4F7E;             /* neutral notices */
  --bb-ok: #3F3B34;               /* success text; falls back to ink when the accent shares danger's hue */
  --bb-disabled: #AAA8A5;         /* disabled controls and placeholder text */
  --bb-codekw: #553F79;           /* code — keywords */
  --bb-codestr: #1D5B30;          /* code — strings */
  --bb-codenum: #763A1C;          /* code — numbers */
  --bb-codefn: #1D4F7E;           /* code — functions */
  --bb-codecom: #63625F;          /* code — comments */
  --bb-c1: #00494F;               /* chart series 1 */
  --bb-c2: #63260F;               /* chart series 2 */
  --bb-c3: #1C3A6C;               /* chart series 3 */
  --bb-c4: #51285A;               /* chart series 4 */
  --bb-c5: #483B00;               /* chart series 5 */
  --bb-art: #D9A05A;              /* artwork only — lit windows, the lantern. Never interface. */
}

/* Night. Not an inversion — the background is warm-tinted and the accent is lifted,
   because a neutral black under a warm palette reads as a dimmed light mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bb-paper: #0E0D0C;
    --bb-surface: #181615;
    --bb-surface2: #201F1D;
    --bb-sunken: #131211;
    --bb-hover: #252423;
    --bb-ink: #EEECE8;
    --bb-muted: #8C8983;
    --bb-rule: #232120;
    --bb-run: #D7D2C8;
    --bb-runfill: #D7D2C8;
    --bb-onrun: #0E0D0C;
    --bb-onink: #0E0D0C;
    --bb-focus: #D7D2C8;
    --bb-select: #3A3835;
    --bb-scrim: #010101;
    --bb-danger: #FFB3A8;
    --bb-warn: #EFC283;
    --bb-info: #9BD0FF;
    --bb-ok: #D7D2C8;
    --bb-disabled: #474644;
    --bb-codekw: #D4BDFF;
    --bb-codestr: #9EDCAA;
    --bb-codenum: #FFB797;
    --bb-codefn: #9BD0FF;
    --bb-codecom: #8A8986;
    --bb-c1: #7CE1E6;
    --bb-c2: #FFB99F;
    --bb-c3: #AACFFF;
    --bb-c4: #EABAF5;
    --bb-c5: #DCD086;
    --bb-art: #D9A05A;
  }
}

[data-theme=dark] {
  --bb-paper: #0E0D0C;
  --bb-surface: #181615;
  --bb-surface2: #201F1D;
  --bb-sunken: #131211;
  --bb-hover: #252423;
  --bb-ink: #EEECE8;
  --bb-muted: #8C8983;
  --bb-rule: #232120;
  --bb-run: #D7D2C8;
  --bb-runfill: #D7D2C8;
  --bb-onrun: #0E0D0C;
  --bb-onink: #0E0D0C;
  --bb-focus: #D7D2C8;
  --bb-select: #3A3835;
  --bb-scrim: #010101;
  --bb-danger: #FFB3A8;
  --bb-warn: #EFC283;
  --bb-info: #9BD0FF;
  --bb-ok: #D7D2C8;
  --bb-disabled: #474644;
  --bb-codekw: #D4BDFF;
  --bb-codestr: #9EDCAA;
  --bb-codenum: #FFB797;
  --bb-codefn: #9BD0FF;
  --bb-codecom: #8A8986;
  --bb-c1: #7CE1E6;
  --bb-c2: #FFB99F;
  --bb-c3: #AACFFF;
  --bb-c4: #EABAF5;
  --bb-c5: #DCD086;
  --bb-art: #D9A05A;
}

[data-theme=light] {
  --bb-paper: #F2F0EC;
  --bb-surface: #E9E7E3;
  --bb-surface2: #E0DEDA;
  --bb-sunken: #EEECE8;
  --bb-hover: #DDDBD7;
  --bb-ink: #1A1917;
  --bb-muted: #615E58;
  --bb-rule: #DEDBD4;
  --bb-run: #3F3B34;
  --bb-runfill: #3F3B34;
  --bb-onrun: #F2F0EC;
  --bb-onink: #F2F0EC;
  --bb-focus: #3F3B34;
  --bb-select: #C7C5C0;
  --bb-scrim: #3E3E3D;
  --bb-danger: #78362F;
  --bb-warn: #6B4400;
  --bb-info: #1D4F7E;
  --bb-ok: #3F3B34;
  --bb-disabled: #AAA8A5;
  --bb-codekw: #553F79;
  --bb-codestr: #1D5B30;
  --bb-codenum: #763A1C;
  --bb-codefn: #1D4F7E;
  --bb-codecom: #63625F;
  --bb-c1: #00494F;
  --bb-c2: #63260F;
  --bb-c3: #1C3A6C;
  --bb-c4: #51285A;
  --bb-c5: #483B00;
  --bb-art: #D9A05A;
}

/* Baseline. Structure comes from hairlines and space — never from fills. */
html { color-scheme: light dark; }
body { background: var(--bb-paper); color: var(--bb-ink); }
::selection { background: var(--bb-select); }
hr, .rule { border: 0; border-top: 1px solid var(--bb-rule); }
:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 2px; }