/**
 * Abdur Rehman Portfolio - Design System Variables
 * Defines theme colors, gradients, font typography, layout scales, shadows, and interactive presets.
 */

:root {
    /* Color Palette */
    --color-bg: #0A0F1D;               /* Slate Dark Background */
    --color-bg-darker: #060912;        /* Even deeper dark for contrast sections */
    --color-surface: #131B2E;          /* Glassmorphic/Card Base Surface */
    --color-surface-hover: #1E2942;    /* Interactive states on surface */
    
    --color-primary: #0F172A;          /* Deep Navy Blue */
    --color-secondary: #2563EB;        /* Electric Blue */
    --color-accent: #06B6D4;           /* Cyan Accent */
    --color-accent-rgb: 6, 182, 212;   /* RGB for alpha-channel glow effects */
    --color-secondary-rgb: 37, 99, 235;
    
    /* Text Colors */
    --color-text-primary: #F8FAFC;     /* Off-white */
    --color-text-secondary: #94A3B8;   /* Light Slate Gray */
    --color-text-muted: #64748B;       /* Medium Slate Gray */
    --color-text-disabled: #475569;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    --gradient-navy-dark: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-darker) 100%);
    --gradient-glow: radial-gradient(600px circle at var(--x, 0px) var(--y, 0px), rgba(var(--color-accent-rgb), 0.08), transparent 40%);
    --gradient-border-glow: radial-gradient(800px circle at var(--x, 0px) var(--y, 0px), rgba(var(--color-accent-rgb), 0.4), transparent 40%);
    
    /* Borders & Outlines */
    --border-color: rgba(148, 163, 184, 0.08);
    --border-color-focus: rgba(6, 182, 212, 0.4);
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-full: 9999px;
    
    /* Typography Font Stack */
    --font-heading: 'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Weight Scales */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Font Size Scales (Mobile-First, using Clamp) */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);       /* 12px - 13px */
    --fs-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);   /* 13px - 15px */
    --fs-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem); /* 15px - 17px */
    --fs-md: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);        /* 17px - 20px */
    --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);        /* 20px - 24px */
    --fs-xl: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);       /* 24px - 30px */
    --fs-2xl: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);       /* 30px - 40px */
    --fs-3xl: clamp(2.5rem, 2.1rem + 1.7vw, 3.5rem);         /* 40px - 56px */
    --fs-display: clamp(3.5rem, 2.9rem + 2.6vw, 5rem);       /* 56px - 80px */
    
    /* Spacing / Layout Grid */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6rem;
    
    /* Shadows & Glows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    
    --glow-cyan: 0 0 15px rgba(6, 182, 212, 0.25);
    --glow-cyan-strong: 0 0 25px rgba(6, 182, 212, 0.5);
    --glow-blue: 0 0 15px rgba(37, 99, 235, 0.25);
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Header / Nav Dimensions */
    --header-height: 80px;
    --header-height-scrolled: 64px;
    --z-header: 100;
    --z-mobile-menu: 90;
    --z-back-to-top: 80;
}