/* ========================================
   BASE.CSS - Core Styles
   Cross-Browser Compatible
   ======================================== */

:root {
  --bg: #0d0d0d;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --primary: #00d4ff;
  --primary-dim: rgba(0, 212, 255, 0.1);
  --secondary: #7b61ff;
  --accent: #00d4ff;
  --accent-dim: rgba(0, 212, 255, 0.1);
  --pink: #ff006e;
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --glow-primary: rgba(0, 212, 255, 0.5);
  --glow-secondary: rgba(123, 97, 255, 0.5);
  --glow-accent: rgba(0, 212, 255, 0.5);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, 'Courier New', monospace;
}

*, *::before, *::after { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  margin: 0; 
  padding: 0;
}

html { 
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

/* GPU Acceleration for smooth animations - Cross Browser */
.hero-card, .skill-card, .project-card, .btn, .nav-cta, 
.profile-link, .social-link, .scroll-top, .story-block,
.facts-card, .tech-card, .info-item, .tech-tag {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

/* Smooth transitions at native refresh rate */
* {
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { 
  font-family: inherit; 
  cursor: pointer; 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Optimized Scrollbar - WebKit */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { 
  background: -webkit-linear-gradient(top, var(--primary), var(--secondary));
  background: linear-gradient(180deg, var(--primary), var(--secondary)); 
  border-radius: 3px; 
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg);
}

/* Touch optimization */
@media (hover: none) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  a, button {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
}