/* ==========================================
   CSS VARIABLES - Design Tokens
   Premium Developer Portfolio Theme
   ========================================== */

:root {
  /* Colors */
--color-brand: #22d3ee;          /* Clean Cyan */
--color-brand-dark: #047857;     /* Soft Amber Accent */
--color-brand-darker: #0e7490;   /* Deep Cyan */
--color-brand-darkest: #082f49;  /* Dark Blue */

--color-bg-primary: #020617;     /* Deep Navy */
--color-bg-secondary: #0f172a;   /* Slate Navy */
--color-bg-card: #111827;        /* Dark Card */

--color-text-primary: #f8fafc;   /* Almost White */
--color-text-secondary: #cbd5e1; /* Soft Slate */
--color-text-muted: #94a3b8;     /* Muted Text */
--color-text-dim: #64748b;       /* Dim Text */

--color-border: rgba(148, 163, 184, 0.18);
--color-border-light: rgba(148, 163, 184, 0.08);
--color-border-brand: rgba(34, 211, 238, 0.35);

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 22px rgba(0, 0, 0, 0.38);
--shadow-xl: 0 24px 45px rgba(0, 0, 0, 0.42);
--shadow-glow: 0 0 28px rgba(34, 211, 238, 0.28);
    
    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 22px rgba(0, 0, 0, 0.38);
    --shadow-xl: 0 24px 45px rgba(0, 0, 0, 0.42);
    --shadow-glow: 0 0 28px rgba(124, 58, 237, 0.35);
    
    /* Z-Index */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal: 40;
    --z-tooltip: 50;
    --z-overlay: 9999;
}