:root {
  /* ── brand ───────────────────────────────────────────── */
  --color-brand:          #7C3AED;
  --color-brand-hover:    #6D28D9;
  --color-brand-subtle:   rgba(124, 58, 237, 0.12);
  --color-brand-text:     #C4B5FD;

  /* ── surfaces ────────────────────────────────────────── */
  --color-bg:             #09090B;
  --color-surface:        #111115;
  --color-surface-raised: #1C1C21;

  /* ── borders ─────────────────────────────────────────── */
  --color-border:         #2A2A32;
  --color-border-focus:   #7C3AED;
  --color-border-hover:   #3A3A45;

  /* ── text ────────────────────────────────────────────── */
  --color-text:           #F4F4F5;
  --color-text-muted:     #A1A1AA;
  --color-text-subtle:    #71717A;

  /* ── semantic — success ──────────────────────────────── */
  --color-success:        #22C55E;
  --color-success-subtle: rgba(34, 197, 94, 0.12);
  --color-success-border: rgba(34, 197, 94, 0.25);
  --color-success-text:   #86EFAC;

  /* ── semantic — error ────────────────────────────────── */
  --color-error:          #EF4444;
  --color-error-subtle:   rgba(239, 68, 68, 0.12);
  --color-error-border:   rgba(239, 68, 68, 0.25);
  --color-error-text:     #FCA5A5;

  /* ── semantic — warning ──────────────────────────────── */
  --color-warning:        #F59E0B;
  --color-warning-subtle: rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.25);
  --color-warning-text:   #FCD34D;

  /* ── semantic — running / info ───────────────────────── */
  --color-running:        #38BDF8;
  --color-running-subtle: rgba(56, 189, 248, 0.12);
  --color-running-border: rgba(56, 189, 248, 0.25);
  --color-running-text:   #7DD3FC;

  /* ── radius ──────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;

  /* ── spacing ─────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── typography ──────────────────────────────────────── */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Jetbrains Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-brand: 0 0 0 3px rgba(124, 58, 237, 0.35);

  /* ── transitions ─────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 160ms;
  --duration-slow:   240ms;
  --ease-default:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── sidebar / layout ────────────────────────────────── */
  --sidebar-width: 224px;
  --topbar-height: 56px;
  --bottombar-height: 56px;
}