/* variables.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Colors - Light Theme */
  --bg-color: #f8fafc;
  --text-color: #0f172a;
  --text-muted: #64748b;
  
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-glow: rgba(37, 99, 235, 0.4);
  
  --secondary-color: #0f172a;
  --accent-color: #38bdf8;
  
  --surface-color: #ffffff;
  --border-color: #e2e8f0;
  
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

  /* Colors - Dark Theme (Can be toggled by body class) */
  --dark-bg-color: #0b0f19;
  --dark-text-color: #f8fafc;
  --dark-text-muted: #94a3b8;
  --dark-surface-color: #111827;
  --dark-border-color: #1e293b;
  --dark-glass-bg: rgba(17, 24, 39, 0.7);
  --dark-glass-border: rgba(255, 255, 255, 0.1);
  --dark-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Spacing & Layout */
  --container-width: 1200px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

[data-theme="dark"] {
  --bg-color: var(--dark-bg-color);
  --text-color: var(--dark-text-color);
  --text-muted: var(--dark-text-muted);
  --surface-color: var(--dark-surface-color);
  --border-color: var(--dark-border-color);
  --glass-bg: var(--dark-glass-bg);
  --glass-border: var(--dark-glass-border);
  --glass-shadow: var(--dark-glass-shadow);
}