:root {
  /* --- Brand & Accent Tokens --- */
  --primary-50: #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-500: #6366F1;
  --primary-600: #4F46E5;
  --primary-700: #4338CA;
  --primary-800: #3730A3;
  --primary-900: #312E81;
  --primary-glow: rgba(99, 102, 241, 0.15);

  /* --- Neutral Slate Grayscale (Commercial SaaS Palette) --- */
  --bg-app: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F8FAFC;
  --bg-subtle: #F1F5F9;
  --bg-subtle-2: #E2E8F0;

  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: #6366F1;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  /* --- Semantic Status Tokens --- */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  --info-50: #F0F9FF;
  --info-100: #E0F2FE;
  --info-500: #0EA5E9;
  --info-600: #0284C7;
  --info-700: #0369A1;

  --tier-premium-bg: #FAF5FF;
  --tier-premium-text: #7E22CE;
  --tier-premium-border: #E9D5FF;

  --tier-trial-bg: #ECFDF5;
  --tier-trial-text: #047857;
  --tier-trial-border: #A7F3D0;

  --tier-free-bg: #F1F5F9;
  --tier-free-text: #475569;
  --tier-free-border: #CBD5E1;

  /* --- Typography --- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* --- Elevation & Shadows (Multi-layered subtle diffusion) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);

  /* --- Border Radii --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* --- Animation Easing & Timings --- */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Dimensions --- */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 60px;
}