/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES
   Mehedi Hasan - Premium 3D Portfolio
   ========================================================================== */

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

:root {
  /* Color Palette - Dark Premium */
  --bg-primary: #0A0A0E;
  --bg-secondary: #12121A;
  --bg-card: rgba(18, 18, 26, 0.85);
  --bg-card-hover: rgba(26, 26, 38, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-glass-hover: rgba(0, 245, 255, 0.6);

  /* Typography Colors - Dark Mode */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0C4;
  --text-muted: #7A7A8C;

  /* Accent Colors */
  --accent: #00F5FF;         /* Electric Cyan */
  --accent-cyan: #00F5FF;
  --accent-purple: #9D4EDD;   /* Bright Neon Purple */
  --accent-blue: #0066FF;     /* Hyper Blue */
  --accent-pink: #FF007F;     /* Hot Neon Pink */

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #9D4EDD 0%, #0066FF 50%, #00F5FF 100%);
  --gradient-text: linear-gradient(135deg, #FFFFFF 40%, #00F5FF 100%);
  --gradient-accent-text: linear-gradient(135deg, #A855F7 0%, #3B82F6 50%, #00F5FF 100%);
  --gradient-glow: radial-gradient(circle, rgba(0, 245, 255, 0.18) 0%, rgba(157, 78, 221, 0.08) 50%, transparent 70%);

  /* Fonts */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Shadow & Glow Effects */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.9);
  --glow-cyan: 0 0 25px rgba(0, 245, 255, 0.5);
  --glow-purple: 0 0 25px rgba(157, 78, 221, 0.5);

  /* Layout & Spacing */
  --container-max-width: 1320px;
  --header-height: 80px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Backdrop Blur */
  --blur-glass: blur(16px) saturate(180%);
}

/* Light Mode Overrides (Polished High-Contrast Palette) */
[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #F1F5F9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: #FFFFFF;
  --bg-glass: rgba(0, 0, 0, 0.03);
  --border-glass: rgba(15, 23, 42, 0.12);
  --border-glass-hover: rgba(2, 132, 199, 0.6);

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;

  --accent: #0284C7;
  --accent-cyan: #0284C7;
  --accent-purple: #7E22CE;
  --accent-blue: #1D4ED8;

  --gradient-primary: linear-gradient(135deg, #7E22CE 0%, #1D4ED8 50%, #0284C7 100%);
  --gradient-text: linear-gradient(135deg, #0F172A 30%, #0284C7 100%);
  --gradient-accent-text: linear-gradient(135deg, #7E22CE 0%, #1D4ED8 50%, #0284C7 100%);

  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --glow-cyan: 0 0 25px rgba(2, 132, 199, 0.3);
  --glow-purple: 0 0 25px rgba(126, 34, 206, 0.3);
}