:root {
  /* Primary colors - Focused on orange, black, white */
  --color-vivid-orange: 254 87 41;
  --color-charcoal-black: 11 11 12;      /* Pitch black base background */
  --color-cool-gray: 161 161 170;       /* Neutral gray for readable text */
  --color-pure-white: 255 255 255;
  
  /* Secondary / Accent colors */
  --color-charcoal-gray: 24 24 27;      /* Clean dark surface color (Tailwind zinc-900) */
  --color-soft-pearl: 228 228 231;      /* Light gray for high contrast text (Tailwind zinc-200) */
  --color-deep-dark: 18 18 20;          /* Card background base */
  --color-warm-apricot: 253 143 95;     /* Hover lighter orange accent */
}

/* Proxima Nova Font Faces */
@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/ProximaNova-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Thin Italic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Semibold Italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Bold Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Extrabold Italic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('./fonts/Proxima Nova Black Italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Set base font and background */
body {
  font-family: 'Proxima Nova', system-ui, sans-serif;
  background-color: rgb(var(--color-charcoal-black));
  color: rgb(var(--color-pure-white));
  overflow-x: hidden;
}

/* Background video styles */
.video-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.video-bg-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Premium micro-interactions */
.glow-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(254, 87, 41, 0.2);
}

.glow-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
}

.glow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(254, 87, 41, 0.4);
}

.glow-button:hover::after {
  left: 100%;
}

.premium-card {
  background-color: rgb(var(--color-deep-dark));
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card:hover {
  border-color: rgba(var(--color-vivid-orange), 0.4);
  box-shadow: 0 10px 30px -10px rgba(var(--color-vivid-orange), 0.15);
  transform: translateY(-4px);
}

/* Custom Scrollbar for modern feel */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-charcoal-black));
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--color-vivid-orange), 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-vivid-orange), 0.6);
}

/* Mobile navigation drawer background styling */
.mobile-menu-bg {
  background-color: #141416 !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

@media (min-width: 768px) {
  .mobile-menu-bg {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}