/* Design Tokens — Blender Dark Pro */

:root {
  /* Base palette */
  --clr-bg-0: #1a1a1a;
  --clr-bg-1: #222222;
  --clr-bg-2: #2a2a2a;
  --clr-bg-3: #333333;
  --clr-bg-4: #3c3c3c;
  --clr-bg-hover: #444444;

  --clr-text-0: #f0f0f0;
  --clr-text-1: #cccccc;
  --clr-text-2: #999999;
  --clr-text-3: #666666;

  /* Accent */
  --clr-accent: #4c8bf5;
  --clr-accent-hover: #6ba1f7;
  --clr-accent-active: #3a75d4;
  --clr-accent-dim: rgba(76, 139, 245, 0.15);

  /* Status */
  --clr-success: #4caf50;
  --clr-success-dim: rgba(76, 175, 80, 0.15);
  --clr-warning: #ff9800;
  --clr-warning-dim: rgba(255, 152, 0, 0.15);
  --clr-error: #f44336;
  --clr-error-dim: rgba(244, 67, 54, 0.15);
  --clr-info: #2196f3;
  --clr-info-dim: rgba(33, 150, 243, 0.15);

  /* Job statuses */
  --clr-status-deferred: #ff9800;
  --clr-status-queued: #2196f3;
  --clr-status-taken: #9c27b0;
  --clr-status-processing: #4caf50;
  --clr-status-completed: #8bc34a;

  /* Billing modes */
  --clr-mode-unlimited: #78909c;
  --clr-mode-manual: #4caf50;
  --clr-mode-credit: #ff9800;

  /* Borders */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --border-medium: 1px solid rgba(255, 255, 255, 0.1);
  --border-strong: 1px solid rgba(255, 255, 255, 0.15);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;
  --gap-2xl: 32px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 350ms ease;
}