:root {
  --font: -apple-system, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Modular unit — every fixed height is an integer multiple of `--u`
     (constitution §1.17 / atomics «Vertical unit»). */
  --u: 4px;

  --space-1: var(--u);                 /* 1u */
  --space-2: calc(var(--u) * 2);       /* 2u */
  --space-3: calc(var(--u) * 3);       /* 3u */
  --space-4: calc(var(--u) * 4);       /* 4u */
  --space-5: calc(var(--u) * 6);       /* 6u */
  --space-6: calc(var(--u) * 8);       /* 8u */

  /* Compact controls (icon buttons, titlebar create/search). */
  --control-h: calc(var(--u) * 7);     /* 7u */

  /* Single-line EntityRow / NavRailItem / list column header.
     10u + border-box + space-2 Y pad leaves room for body line-height 1.5. */
  --row-h: calc(var(--u) * 10);        /* 10u */

  /* Shared L/C/R workspace chrome band + hairline Y. */
  --pane-chrome-height: calc(var(--u) * 9); /* 9u */

  /* Readable measure — inputs, textareas, and paragraphs (constitution). */
  --measure: 400px;

  /* EntityList / EntityRow horizontal gutter — global; do not override per view. */
  --list-pad-x: var(--space-3);

  /* Column alignment (atomics) — text/date start; number end. */
  --align-text: left;
  --align-date: left;
  --align-number: right;

  --radius: 8px;
  --radius-sm: 6px;

  /* Tinted neutrals — never pure gray. `--chrome-hue` / `--base-hue` is
     Appearance `chrome_hue` (default 232). `--chrome-brightness` (0–100,
     default 50) lifts or darkens surface lightness; `--chrome-saturation`
     (0–100, default 50) scales tint strength (0 = gray). Surfaces, borders,
     and accent all follow this hue. */
  --chrome-hue: 232;
  --chrome-brightness: 50;
  --chrome-saturation: 50;
  --chrome-l-bias: calc((var(--chrome-brightness) - 50) * 0.28);
  --chrome-s-mul: calc(var(--chrome-saturation) / 50);
  --base-hue: var(--chrome-hue);
  --chrome-sat: calc(12% * var(--chrome-s-mul));
  --bg: hsl(var(--chrome-hue) var(--chrome-sat) calc(10% + var(--chrome-l-bias) * 1%));
  --bg-elevated: hsl(var(--chrome-hue) calc(10% * var(--chrome-s-mul)) calc(13% + var(--chrome-l-bias) * 1%));
  --bg-inset: hsl(var(--chrome-hue) calc(14% * var(--chrome-s-mul)) calc(8% + var(--chrome-l-bias) * 1%));
  /* WCAG 2.2 AA: --border ≥ 3:1 on elevated (1.4.11) for control outlines.
     --border-subtle is the decorative hairline for row / cell / split rules.
     Nested wrappers: outer `--border-outer` is faded; inner `--border-inner`
     is brighter. --text-muted is the solid CAPTION_TONE ≥ 4.5:1 (1.4.3). */
  --border: hsl(var(--chrome-hue) calc(10% * var(--chrome-s-mul)) calc(44% + var(--chrome-l-bias) * 0.6%));
  --border-subtle: hsl(var(--chrome-hue) calc(10% * var(--chrome-s-mul)) calc(18% + var(--chrome-l-bias) * 1%));
  --border-outer: hsl(var(--chrome-hue) calc(12% * var(--chrome-s-mul)) calc(20% + var(--chrome-l-bias) * 1%));
  --border-inner: hsl(var(--chrome-hue) calc(14% * var(--chrome-s-mul)) calc(34% + var(--chrome-l-bias) * 0.8%));
  --text: hsl(var(--chrome-hue) calc(8% * var(--chrome-s-mul)) calc(91% - var(--chrome-l-bias) * 0.35%));
  --text-muted: hsl(var(--chrome-hue) calc(6% * var(--chrome-s-mul)) calc(67% - var(--chrome-l-bias) * 0.25%));
  --accent: hsl(var(--base-hue) calc(72% * var(--chrome-s-mul)) 64%);
  --accent-strong: hsl(var(--base-hue) calc(78% * var(--chrome-s-mul)) 74%);
  --accent-ink: hsl(var(--base-hue) calc(42% * var(--chrome-s-mul)) 16%);
  --selection: color-mix(in srgb, var(--accent) 24%, var(--bg-elevated));
  --danger: #f87171;
  --success: #22c55e;
  --running: #2dd4bf;
  --warning: #eab308;

  /* Entity icons (brand / directory / membership roles). */
  --entity-brand: #3b82f6;
  --entity-admin: #ef4444;
  --entity-owner: #f97316;
  --entity-member: #22c55e;
  --entity-guest: #9a9ba3;
  --entity-submission: #60a5fa;
  --entity-product: #a78bfa;
  --entity-ingredient: #2dd4bf;
  --entity-result: #34d399;
  --entity-certificate: hsl(28 32% 55%);
}

* {
  box-sizing: border-box;
}

/* Every focusable control gets the same visible ring — buttons, inputs,
   and other keyboard-operable controls share one focus treatment instead
   of relying on inconsistent browser defaults. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* Single body size everywhere. Hierarchy comes from spacing, muted
     color, and weight — not new sizes. */
  font-size: 12px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
}

h3 {
  color: var(--text-muted);
  font-weight: 500;
}

p {
  margin: 0;
  max-width: min(100%, var(--measure));
}

.muted {
  color: var(--text-muted);
}

/* Constitution measure — wrap form stacks / prose columns. */
.measure {
  width: 100%;
  max-width: var(--measure);
}

.hidden {
  display: none !important;
}