/* ==========================================================================
   DESIGN SYSTEM VARIABLES - KASRA PORTFOLIO
   ========================================================================== */

:root {
  /* Color Palette - Mood Board Inspired */
  --bg-primary: #080C10;
  --bg-secondary: #0D0F17;
  --bg-surface: #12131A;
  --bg-surface-elevated: #1E1F2B;
  --bg-glass: rgba(18, 19, 26, 0.75);
  --bg-glass-card: rgba(255, 255, 255, 0.03);

  /* Accents & Lighting */
  --accent-violet: #6C5CE7;
  --accent-violet-light: #9B8CFF;
  --accent-violet-glow: rgba(108, 92, 231, 0.4);
  
  --accent-blue: #4A7BFF;
  --accent-blue-light: #7DA4FF;
  --accent-blue-glow: rgba(74, 123, 255, 0.35);

  --accent-cyan: #00F2FE;
  --accent-emerald: #00E676;

  /* Text & Neutral Colors */
  --text-primary: #F5F6FA;
  --text-secondary: #C4C7D7;
  --text-muted: #8C8EA0;
  --text-dark: #080C10;

  /* Borders & Separators */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(108, 92, 231, 0.35);
  --border-active: rgba(74, 123, 255, 0.6);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Typography */
  --font-heading: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions & Timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-out-expo);
  --transition-normal: 0.35s var(--ease-out-expo);
  --transition-slow: 0.6s var(--ease-out-expo);

  /* Shadows & Gloom Effects */
  --shadow-subtle: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow-violet: 0 0 30px -5px rgba(108, 92, 231, 0.4);
  --shadow-glow-blue: 0 0 30px -5px rgba(74, 123, 255, 0.4);

  /* Z-Index Architecture */
  --z-background: -10;
  --z-canvas: 1;
  --z-content: 10;
  --z-navbar: 100;
  --z-cursor: 999;
  --z-modal: 1000;
}