/* Copied by assets/bonseki/brand/sync.py from assets/bonseki/brand/tokens.css. Do not edit; change the brand there. */
/*
 * Bonseki design tokens: every color, type size, weight, radius and shadow that bonseki.com and the control center
 * use. Components never write a literal color or font size; a new token needs a light value and a dark value.
 * This is the only copy to edit. python3 assets/bonseki/brand/sync.py copies it into websites/bonseki/brand/ and
 * node/control-center/src/brand/, and the design kit in assets/bonseki/design-kit/ draws with it.
 *
 * The look: near-black ink on cool paper, Inter at regular weight with medium headings, hairline rules and no
 * shadows except on the raised surfaces (menus, the dialog and the assistant). Light is the default; dark follows the
 * system unless the viewer picked a theme. bonseki.com sets data-theme="light" and stays light.
 */
:root {
  color-scheme: light;

  /* Surfaces and ink. */
  --bg: #f2f1ed;
  --surface: #f7f6f2;
  --surface-2: #e8e6e0;
  --border: rgba(17, 17, 16, .12);
  --border-strong: rgba(17, 17, 16, .34);
  --text: #111110;
  --muted: #6c6b66;
  --accent: #111110;
  --accent-text: #f2f1ed;
  --focus: #111110;

  /* Status tones: each a text color and a fill. Components take them through .tone-<name>, as --tone and --tone-bg. */
  --ok: #1f6b45;      --ok-bg: #e0ece2;
  --busy: #3f5a52;    --busy-bg: #e0e7e2;
  --warn: #8a4f00;    --warn-bg: #f4e7cf;
  --bad: #a3261e;     --bad-bg: #f3e0dc;
  --idle: #6c6b66;    --idle-bg: #e7e6e1;
  --unknown: #6e6250; --unknown-bg: #eae4d8;

  /* Lineage lanes. Lane 0 is ink so green only marks the running company; lanes 2 and 4 reuse the warn and busy inks. */
  --lane-0: var(--text);
  --lane-1: #2f5d8a;
  --lane-2: var(--warn);
  --lane-3: #7a3e7a;
  --lane-4: var(--busy);

  /* Raised surfaces: menus, the dialog and the assistant panel; the launcher floats lower. */
  --shadow-raised: 0 16px 48px rgba(0, 0, 0, .2);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, .14);
  --backdrop: rgba(17, 17, 16, .45);

  /* Type. Inter (brand.css loads it); size and ink carry the hierarchy, headings and the name are medium. */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-2xs: 11px;   /* counts, tags, field labels on narrow screens */
  --text-xs: 12px;    /* .sub lines, badges, status notes, .small */
  --text-sm: 13px;    /* secondary text: footers, operations, menus, fields, table heads, small buttons */
  --text-md: 14px;    /* body */
  --text-lg: 15px;    /* intros, runtimes, column headings */
  --text-xl: 17px;    /* card titles (h2) and company names */
  --text-brand: 26px; /* the wordmark in the control center's topbar; bonseki.com scales it with the window */
  --text-display: clamp(2.2rem, 3.4vw, 3rem); /* page titles (h1) */
  --text-root: 16px;  /* bonseki.com's rem base */
  --text-mono: 12.5px; /* code and IDs: monospace reads larger, so it sits half a step under body */
  --weight-regular: 400;
  --weight-heading: 500; /* h1, h2, the wordmark, section summaries and headline figures */
  --weight-strong: 600;  /* only the run the page shows, and bold in assistant replies */
  --tracking-display: -.04em; /* h1 */
  --tracking-brand: -.035em;  /* the wordmark */
  --font: var(--weight-regular) var(--text-md)/1.55 var(--font-family);

  /* Shape and space. Paddings, margins, gaps and offsets use the spacing scale; 1-3px nudges (a chip's inner
     padding, an underline offset) stay literal. --space-8 and up are page-level: the gutters and the page's top and
     bottom space. */
  --radius: 2px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --gap: var(--space-4);
  --gutter: max(24px, calc((100vw - 1240px) / 2));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110; --surface: #1a1a18; --surface-2: #242422; --border: rgba(242, 241, 237, .14); --border-strong: rgba(242, 241, 237, .34);
    --text: #f2f1ed; --muted: #a3a29c; --accent: #f2f1ed; --accent-text: #111110; --focus: #f2f1ed;
    --ok: #8fc9a2; --ok-bg: #1b2d22; --busy: #a8c3b6; --busy-bg: #22302a; --warn: #e9c07c; --warn-bg: #3a2d1a;
    --bad: #ee9f92; --bad-bg: #3c211d; --idle: #b4b3ad; --idle-bg: #2a2a27; --unknown: #cfbd99; --unknown-bg: #322c22;
    --lane-1: #8fb6e0; --lane-3: #d6a3d6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110; --surface: #1a1a18; --surface-2: #242422; --border: rgba(242, 241, 237, .14); --border-strong: rgba(242, 241, 237, .34);
  --text: #f2f1ed; --muted: #a3a29c; --accent: #f2f1ed; --accent-text: #111110; --focus: #f2f1ed;
  --ok: #8fc9a2; --ok-bg: #1b2d22; --busy: #a8c3b6; --busy-bg: #22302a; --warn: #e9c07c; --warn-bg: #3a2d1a;
  --bad: #ee9f92; --bad-bg: #3c211d; --idle: #b4b3ad; --idle-bg: #2a2a27; --unknown: #cfbd99; --unknown-bg: #322c22;
  --lane-1: #8fb6e0; --lane-3: #d6a3d6;
}