/* Design System Tokens - Harsh Shah AI Portfolio */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Transitions & Shadows */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
}

/* Light Theme Tokens */
:root[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-border: rgba(203, 213, 225, 0.6);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --accent-primary: #d97706; /* Warm Gold / Orange */
  --accent-hover: #b45309;
  --accent-glow: rgba(217, 119, 6, 0.2);
  --avatar-bg: #ffb700; /* Golden Circle Background */
  
  --secondary-color: #0284c7;
  --success-color: #10b981;
  --error-color: #ef4444;

  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 20px 40px -15px rgba(217, 119, 6, 0.15);
  --nav-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

/* Dark Theme Tokens (Default & Exact Match to portfolio website Design.png) */
:root[data-theme="dark"] {
  --bg-primary: #0a0c10;
  --bg-secondary: #12161f;
  --bg-tertiary: #1b2230;
  --bg-glass: rgba(18, 22, 31, 0.82);
  --bg-glass-border: rgba(255, 255, 255, 0.1);
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --accent-primary: #ffcc00; /* Vibrant Golden Yellow from Design */
  --accent-hover: #ffdf4d;
  --accent-glow: rgba(255, 204, 0, 0.25);
  --avatar-bg: #ffcc00; /* Golden Circle Background */

  --secondary-color: #38bdf8;
  --success-color: #34d399;
  --error-color: #f87171;

  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 20px 40px -15px rgba(255, 204, 0, 0.22);
  --nav-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.7);
}