/* css/variables.css - Global Stylesheet Variables and Tokens */

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

:root {
  /* Color Palette - System Default (Dark Theme) */
  --bg-primary: #0b0d17;
  --bg-secondary: #121526;
  --bg-tertiary: #191c32;
  --bg-glass: rgba(18, 21, 38, 0.6);
  --bg-glass-hover: rgba(25, 28, 50, 0.75);
  
  --text-primary: #ffffff;
  --text-secondary: #a0a6cc;
  --text-muted: #697097;
  
  /* Brand Specifics */
  --color-akaay: #0072ff;
  --color-akaay-rgb: 0, 114, 255;
  --color-infoniq: #a04ef6;
  --color-infoniq-rgb: 160, 78, 246;
  --color-animiq: #ff3b70;
  --color-animiq-rgb: 255, 59, 112;
  
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --glow-shadow-akaay: 0 0 20px rgba(0, 114, 255, 0.35);
  --glow-shadow-infoniq: 0 0 20px rgba(160, 78, 246, 0.35);
  --glow-shadow-animiq: 0 0 20px rgba(255, 59, 112, 0.35);

  /* Fonts */
  --font-family-heading: 'Outfit', sans-serif;
  --font-family-body: 'Inter', sans-serif;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  /* Color Palette - Light Theme */
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ebedf5;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-hover: rgba(255, 255, 255, 0.9);
  
  --text-primary: #0f121d;
  --text-secondary: #4a5168;
  --text-muted: #8890ab;
  
  /* Brand Specifics */
  --color-akaay: #0056cc;
  --color-akaay-rgb: 0, 86, 204;
  --color-infoniq: #7a27cc;
  --color-infoniq-rgb: 122, 39, 204;
  --color-animiq: #d6184a;
  --color-animiq-rgb: 214, 24, 74;
  
  --border-color: rgba(15, 18, 29, 0.08);
  --border-color-hover: rgba(15, 18, 29, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
  --glow-shadow-akaay: 0 0 20px rgba(0, 86, 204, 0.15);
  --glow-shadow-infoniq: 0 0 20px rgba(122, 39, 204, 0.15);
  --glow-shadow-animiq: 0 0 20px rgba(214, 24, 74, 0.15);
}