/* ==========================================================================
   SOLVARIONX — PRODUCTION CORPORATE DESIGN SYSTEM
   Reverse-Engineered Standards: Tata Group (Trust) + SpaceX (Telemetry) + Meta (Clarity)
   ========================================================================== */

:root {
  --sx-navy-950: #010B1E;
  --sx-navy-900: #031B4D;
  --sx-navy-850: #062361;
  --sx-navy-800: #0A2E7A;
  --sx-navy-700: #14429E;
  --sx-navy-surface: #F4F7FC;
  --sx-navy-border: #D8E2F2;

  --sx-gold-300: #FCE8B3;
  --sx-gold-400: #F5BE38;
  --sx-gold-500: #D99B16;
  --sx-gold-600: #B27B08;
  --sx-gold-surface: #FFFDF5;
  --sx-gold-border: #F2DCA2;

  --sx-charcoal: #0F172A;
  --sx-muted: #64748B;
  --sx-border: #E2E8F0;
  --sx-surface: #F8FAFC;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Rajdhani', -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, monospace;
}

/* Base resets & typography */
html {
  font-family: var(--font-sans);
  color: var(--sx-navy-900);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sx-gold-500);
}

/* Telemetry Grid Pattern (SpaceX Inspired) */
.telemetry-grid {
  background-image: 
    linear-gradient(to right, rgba(3, 27, 77, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 27, 77, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.telemetry-grid-dark {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Glassmorphism Navigation */
.header-glass {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(3, 27, 77, 0.08);
}

/* Technical Hairline Borders */
.hairline {
  border: 1px solid rgba(3, 27, 77, 0.09);
}
.hairline-dark {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Precision Badges */
.badge-tech {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Card Hover Elevation (Meta Style) */
.card-elevation {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.card-elevation:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -4px rgba(3, 27, 77, 0.08), 0 4px 12px -2px rgba(3, 27, 77, 0.04);
  border-color: rgba(217, 155, 22, 0.4);
}

/* Interactive Button Hover Flare */
.btn-primary {
  background-color: var(--sx-navy-900);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.btn-primary:hover {
  background-color: var(--sx-navy-850);
  box-shadow: 0 4px 16px rgba(3, 27, 77, 0.25);
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: 0.6s;
}
.btn-primary:hover::after {
  left: 100%;
}

/* Gold Accent Text Gradient */
.text-gold-gradient {
  background: linear-gradient(135deg, #B27B08 0%, #D99B16 50%, #F5BE38 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reading Progress Bar */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--sx-navy-900), var(--sx-gold-500), var(--sx-gold-400));
  z-index: 9999;
  transition: width 0.1s ease-out;
}