:root {
  /* Brand - blue is the only brand color; flat, no gradients.
     UI palette: blue (info), green (success), red (danger), amber (warning). */
  --brand-primary: #2563EB;
  --brand-primary-light: #EFF6FF;
  --brand-primary-soft: #DBEAFE;

  --bg-page: #F5F7FA;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-hover: #F1F5F9;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-link: var(--brand-primary);

  --border-light: #EEF2F6;
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: var(--brand-primary);

  --success: #16A34A;
  --success-soft: #F0FDF4;

  --warning: #D97706;
  --warning-soft: #FFFBEB;

  --danger: #DC2626;
  --danger-soft: #FEF2F2;

  --info: #2563EB;
  --info-soft: #EFF6FF;


  /* Chart/classification colors only - never promoted to brand or semantic use. */
  --chart-blue: #2563EB;
  --chart-green: #16A34A;
  --chart-amber: #D97706;
  --chart-red: #DC2626;

  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale: 10 12 14 16 18 */
  --text-xs: 10px;
  --text-s: 12px;
  --text-m: 14px;
  --text-l: 16px;
  --text-xl: 18px;

  --weight-regular: 400;
  --weight-semibold: 600;

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

  /* Spacing scale: 4 8 12 16 20 24 28 32 */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* Surface padding */
  --page-padding: var(--space-24);
  --card-padding: var(--space-24);
  --dialog-padding: var(--space-24);

  /* Radius scale: 4 8 12 16 20 24 */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;

  --shadow-none: none;
  --overlay-scrim: rgba(15, 23, 42, 0.4);

  --header-height: 56px;
  --footer-height: 40px;
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 72px;
  /* Icon scale: 16 20 24 28 32, then 40 48 64 96 for empty states and placeholder artwork */
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 24px;
  --icon-size-xl: 28px;
  --icon-size-2xl: 32px;
  --icon-size-3xl: 40px;
  --icon-size-4xl: 48px;
  --icon-size-5xl: 64px;
  --icon-size-6xl: 96px;
  --avatar-size: 32px;
  --control-height-m: 36px;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}