/**
 * CanvasForge – Design tokens (single source for colors, radii, shadows, spacing).
 * Include this first so all pages use the same variables. Keeps brand consistent.
 * Used by: cf-ui.css, all pages (header loads style.css + cf-ui.css which references these).
 */
:root {
  /* Backgrounds */
  --cf-bg: #111827;
  --cf-bg-card: #1f2937;
  --cf-bg-elevated: #374151;
  /* Borders */
  --cf-border: #374151;
  --cf-border-focus: rgba(59, 130, 246, 0.5);
  /* Brand */
  --cf-primary: #3b82f6;
  --cf-primary-hover: #2563eb;
  /* Text */
  --cf-text: #f9fafb;
  --cf-text-muted: #9ca3af;
  /* Radii */
  --cf-radius: 12px;
  --cf-radius-lg: 16px;
  /* Shadows */
  --cf-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  --cf-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.25);
  /* Glow */
  --cf-glow-blue: rgba(59, 130, 246, 0.25);
  --cf-glow-purple: rgba(147, 51, 233, 0.2);
  /* Spacing scale (optional) */
  --cf-space-1: 0.25rem;
  --cf-space-2: 0.5rem;
  --cf-space-3: 0.75rem;
  --cf-space-4: 1rem;
  --cf-space-6: 1.5rem;
  --cf-space-8: 2rem;
}