/* GENERATED by packages/ui-kit/scripts/gen.mjs from DESIGN.md -- do not edit.
   Edit DESIGN.md, then run `pnpm --filter @bim-pdf/ui-kit gen` (a test fails when this is stale).

   Broadsheet tokens. Custom properties only, all prefixed --bk-: loading this file restyles
   nothing until a stylesheet (base.css, or a host theme) reads them.
   Light (paper) is the base; dark (ink) via prefers-color-scheme AND an explicit [data-theme].
   [data-theme="light"] on any element (not only the root) brings paper back for that subtree; below the root
   such a subtree is a drawing sheet, whose background is white (colorsSheet). */

/* --- LIGHT (paper): the base, and any [data-theme="light"] subtree ---------- */
/* A light subtree of a dark page (the drawing sheet: paper stays white) re-declares the paper colours. */
:root,
[data-theme="light"] {
  --bk-primary: #141414;
  --bk-on-primary: #fafafa;
  --bk-background: #fafafa;
  --bk-panel: #ebebeb;
  --bk-elevated: #ebebeb;
  --bk-hover: #ebebeb;
  --bk-line: #d4d4d4;
  --bk-border: #575757;
  --bk-focus: #141414;
  --bk-text: #141414;
  --bk-muted: #575757;
  --bk-faint: #575757;
  --bk-ok: #141414;
  --bk-warn: #575757;
  --bk-bad: #575757;
  --bk-alert: #a01919;
  --bk-on-alert: #fafafa;
  --bk-spot: #a12a61;
}

/* --- SHEET: a [data-theme="light"] subtree below the root is the drawing sheet ----- */
/* The drawing stays white (artwork, not chrome): badges drawn on it keep white paper, not the grey page. */
[data-theme="light"]:not(:root) {
  --bk-background: #ffffff;
}

/* --- DARK (ink): OS preference unless the root forces light ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bk-primary: #f5f5f5;
    --bk-on-primary: #0f0f0f;
    --bk-background: #0f0f0f;
    --bk-panel: #1e1e1e;
    --bk-elevated: #1e1e1e;
    --bk-hover: #1e1e1e;
    --bk-line: #333333;
    --bk-border: #b6b6b6;
    --bk-focus: #f5f5f5;
    --bk-text: #f5f5f5;
    --bk-muted: #b6b6b6;
    --bk-faint: #b6b6b6;
    --bk-ok: #f5f5f5;
    --bk-warn: #b6b6b6;
    --bk-bad: #b6b6b6;
    --bk-alert: #eb776b;
    --bk-on-alert: #0f0f0f;
    --bk-spot: #d77aa4;
  }
}

/* --- DARK (ink): explicit ---------------------------------------------------- */
:root[data-theme="dark"] {
  --bk-primary: #f5f5f5;
  --bk-on-primary: #0f0f0f;
  --bk-background: #0f0f0f;
  --bk-panel: #1e1e1e;
  --bk-elevated: #1e1e1e;
  --bk-hover: #1e1e1e;
  --bk-line: #333333;
  --bk-border: #b6b6b6;
  --bk-focus: #f5f5f5;
  --bk-text: #f5f5f5;
  --bk-muted: #b6b6b6;
  --bk-faint: #b6b6b6;
  --bk-ok: #f5f5f5;
  --bk-warn: #b6b6b6;
  --bk-bad: #b6b6b6;
  --bk-alert: #eb776b;
  --bk-on-alert: #0f0f0f;
  --bk-spot: #d77aa4;
}

/* --- non-colour tokens (theme-agnostic) -------------------------------------- */
:root {
  /* font stacks */
  --bk-font-serif: Georgia, 'Times New Roman', ui-serif, serif;
  --bk-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bk-font-mono: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  /* type scale: --bk-type-<name> is a `font` shorthand; the parts are separate tokens */
  --bk-type-masthead: 700 1.75rem/1 var(--bk-font-serif);
  --bk-type-masthead-size: 1.75rem;
  --bk-type-masthead-tracking: -0.01em;
  --bk-type-headline-lg: 700 1.25rem/1.25 var(--bk-font-serif);
  --bk-type-headline-lg-size: 1.25rem;
  --bk-type-headline-lg-tracking: normal;
  --bk-type-headline-md: 700 0.9375rem/1.25 var(--bk-font-serif);
  --bk-type-headline-md-size: 0.9375rem;
  --bk-type-headline-md-tracking: normal;
  --bk-type-headline-sm: 700 0.8125rem/1.25 var(--bk-font-serif);
  --bk-type-headline-sm-size: 0.8125rem;
  --bk-type-headline-sm-tracking: normal;
  --bk-type-body-md: 400 0.8125rem/1.5 var(--bk-font-sans);
  --bk-type-body-md-size: 0.8125rem;
  --bk-type-body-md-tracking: normal;
  --bk-type-body-sm: 400 0.75rem/1.5 var(--bk-font-sans);
  --bk-type-body-sm-size: 0.75rem;
  --bk-type-body-sm-tracking: normal;
  --bk-type-label-md: 600 0.75rem/1 var(--bk-font-sans);
  --bk-type-label-md-size: 0.75rem;
  --bk-type-label-md-tracking: normal;
  --bk-type-label-sm: 600 0.6875rem/1.25 var(--bk-font-sans);
  --bk-type-label-sm-size: 0.6875rem;
  --bk-type-label-sm-tracking: 0.06em;
  --bk-type-data-display: 400 1.625rem/1 var(--bk-font-mono);
  --bk-type-data-display-size: 1.625rem;
  --bk-type-data-display-tracking: normal;
  --bk-type-data-display-feature: 'tnum';
  --bk-type-data-md: 400 0.8125rem/1.5 var(--bk-font-mono);
  --bk-type-data-md-size: 0.8125rem;
  --bk-type-data-md-tracking: normal;
  --bk-type-data-md-feature: 'tnum';
  --bk-type-data-sm: 400 0.75rem/1.5 var(--bk-font-mono);
  --bk-type-data-sm-size: 0.75rem;
  --bk-type-data-sm-tracking: normal;
  --bk-type-data-sm-feature: 'tnum';
  --bk-type-reading-display: 700 2.75rem/1.05 var(--bk-font-serif);
  --bk-type-reading-display-size: 2.75rem;
  --bk-type-reading-display-tracking: -0.015em;
  --bk-type-reading-headline: 700 1.75rem/1.15 var(--bk-font-serif);
  --bk-type-reading-headline-size: 1.75rem;
  --bk-type-reading-headline-tracking: normal;
  --bk-type-reading-subhead: 700 1.25rem/1.25 var(--bk-font-serif);
  --bk-type-reading-subhead-size: 1.25rem;
  --bk-type-reading-subhead-tracking: normal;
  --bk-type-reading-lead: 400 1.25rem/1.5 var(--bk-font-serif);
  --bk-type-reading-lead-size: 1.25rem;
  --bk-type-reading-lead-tracking: normal;
  --bk-type-reading-body: 400 1.0625rem/1.6 var(--bk-font-serif);
  --bk-type-reading-body-size: 1.0625rem;
  --bk-type-reading-body-tracking: normal;
  --bk-type-code: 400 0.8125rem/1.5 var(--bk-font-mono);
  --bk-type-code-size: 0.8125rem;
  --bk-type-code-tracking: normal;
  --bk-type-code-feature: 'tnum';
  /* radius: square */
  --bk-radius-none: 0px;
  /* spacing (4px grid) and fixed sizes */
  --bk-space-0: 0.125rem;
  --bk-space-1: 0.25rem;
  --bk-space-2: 0.5rem;
  --bk-space-3: 0.75rem;
  --bk-space-4: 1rem;
  --bk-space-5: 1.5rem;
  --bk-space-6: 2rem;
  --bk-space-7: 3rem;
  --bk-control-sm: 1.5rem;
  --bk-control-md: 1.75rem;
  --bk-control-lg: 2.125rem;
  --bk-control-sm-coarse: 44px;
  --bk-control-md-coarse: 44px;
  --bk-control-lg-coarse: 48px;
  --bk-touch-min: 44px;
  --bk-rule: 1px;
  --bk-rule-medium: 2px;
  --bk-rule-heavy: 3px;
  --bk-focus-ring: 2px;
  --bk-page-max: 1440px;
  --bk-measure: 68ch;
  --bk-disabled-opacity: 0.45;
}

/* Touch: any coarse pointer (finger, iPad, even with a trackpad attached) grows every
   control height to >= 44px. Keyed on pointer capability, not on width. */
@media (any-pointer: coarse) {
  :root {
    --bk-control-sm: var(--bk-control-sm-coarse);
    --bk-control-md: var(--bk-control-md-coarse);
    --bk-control-lg: var(--bk-control-lg-coarse);
  }
}
