/* Generated by saas/shared/design/build.php — do not edit.
   Change saas/shared/design/tokens.php and run the build. */

/* ──────────────────────────────────────────────────────────────────────────
   Tokens — every colour, radius and step in the panel.

   Nothing elsewhere may write a literal colour. The point is not tidiness: it
   is that a dark theme, a tenant-branded theme or a contrast fix is a change
   to the design system and nothing else.

   Colour carries MEANING here, never decoration. Black is the accent; the
   chips are the only saturated colour, and each one says something: purple is
   "listed publicly", green is "fine", pink is "needs attention", gray is
   "ordinary". A chip chosen for looks would be a chip that means nothing.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-canvas: #F0F0F0;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F7F7;
  --bg-input: #F2F2F2;
  --bg-active-nav: #F3F3F3;

  /* Lines */
  --border: #E6E6E6;
  --border-strong: #0A0A0A;

  /* Text. The two greys are contrast-measured: secondary 6.69:1, muted
     4.54:1. They were lighter once and failed AA on the helper lines that do
     most of the work on this panel. */
  --text-primary: #0A0A0A;
  --text-secondary: #5C5C5C;
  --text-muted: #767676;

  /* Meaning */
  --accent-yellow: #FFE933;
  --success: #22B357;
  --chip-purple-bg: #DDD0FF;
  --chip-purple-text: #4B2FA8;
  --chip-green-bg: #CDEFD9;
  --chip-green-text: #14733F;
  --chip-pink-bg: #FFDDE5;
  --chip-pink-text: #D6245C;
  --chip-gray-bg: #EDEDED;
  --chip-gray-text: #4A4A4A;
  --warning-bg: #FFF8D6;
  --warning-text: #7A5B00;
  --warning-border: #F2E08A;

  /* Shape */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-control: 8px;
  --radius-pill:    999px;

  /* Rhythm — an 8px grid, with 4px available for the inside of small things. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Chrome */
  --sidebar-w:          240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:           64px;

  --t-fast: 150ms ease;
}

/* A dark panel is this block filled in. The variables above are the complete
   list, so no rule elsewhere would have to change. */
[data-theme="dark"] {
  /* --bg-canvas: #0E0E0E; --bg-surface: #161616; … */
}