:root {
  /* ---- Color: surfaces ---- */
  --color-bg: #0B0D14;
  --color-surface: #13161F;
  --color-surface-2: #1A1E2A;
  --color-surface-3: #232838;
  --color-border: #2A2F40;
  --color-border-soft: #1E222F;

  /* ---- Color: text ---- */
  --color-fg: #EDEFF7;
  --color-fg-mid: #A7ADC2;
  --color-fg-muted: #6E7489;
  --color-fg-faint: #474C5E;

  /* ---- Color: accents ---- */
  --color-accent: #FF2D78;
  --color-accent-soft: #3A1627;
  --color-accent-contrast: #160109;
  --color-cyan: #2DE2FF;
  --color-cyan-soft: #0E2A30;

  /* ---- Color: status ---- */
  --color-ok: #36D399;
  --color-ok-soft: #0E2A20;
  --color-warn: #FFC24B;
  --color-warn-soft: #332A10;
  --color-crit: #FF4D5E;
  --color-crit-soft: #331118;

  /* ---- Canvas chrome (kept separate from UI chrome) ---- */
  --canvas-field: #090A10;
  --canvas-grid-dot: #1C2030;
  --canvas-guide: var(--color-accent);
  --canvas-handle-fill: #0B0D14;
  --canvas-handle-border: var(--color-accent);
  --canvas-paddle: #EDEFF7;
  --canvas-ball: var(--color-accent);

  /* Brick tints: all three derive from documented semantic tokens.
     brick-a = cyan (score/info), brick-c = warn (low-lives amber),
     brick-b = accent hue lightened via color-mix — no off-palette hex. */
  --canvas-brick-a: var(--color-cyan);
  --canvas-brick-b: color-mix(in srgb, var(--color-accent) 65%, white);
  --canvas-brick-c: var(--color-warn);

  /* ---- Radius ---- */
  --radius-panel: 12px;
  --radius-control: 8px;
  --radius-artboard: 3px;
  --radius-pill: 9999px;

  /* ---- Type ---- */
  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --text-panel-label: 12px;
  --text-field: 13px;
  --text-layer-row: 13px;
  --text-file-name: 14px;
  --text-body: 14px;
  --text-h1: 28px;
  --text-h2: 20px;
  --text-hud: 18px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Density (per template contract) ---- */
  --rail-width: 56px;
  --layers-width: 240px;
  --inspector-width: 280px;
  --topbar-height: 48px;

  /* ---- Motion ---- */
  --motion-panel: 180ms ease;
  --motion-instant: 0ms;
  --motion-shimmer: 1.6s;

  /* ---- Shadows ---- */
  --shadow-chrome: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-artboard: 0 24px 64px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.5);
  --shadow-panel: 0 4px 16px rgba(0,0,0,0.35);

  /* ---- Breakpoints (documented; this app targets 1280px desktop) ---- */
  --bp-desktop: 1280px;
  --bp-wide: 1600px;
}