Design Token Generator

/* Design Tokens - Light Theme */
:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #326fd1;
  --color-primary-active: #295bac;
  --color-primary-disabled: rgba(59, 130, 246, 0.5);
  --color-secondary: #64748b;
  --color-secondary-hover: #556376;
  --color-secondary-active: #465161;
  --color-accent: #8b5cf6;
  --color-accent-hover: #764ed1;
  --color-accent-active: #6140ac;
  --color-accent-disabled: rgba(139, 92, 246, 0.5);
  --color-neutral: #6b7280;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;
  --surface-background: #ffffff;
  --surface-surface: #f8fafc;
  --surface-card: #ffffff;
  --surface-elevated: #ffffff;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --border-default: #e2e8f0;
  --border-focus: #3b82f6;
  --border-divider: #f1f5f9;
}