/* Base styling variables and dark/light mode configurations */
:root {
  /* Dark mode (default) design tokens */
  --bg-canvas: #08090b;
  --bg-surface: #101114;
  --bg-surface-raised: #16181c;
  --border-subtle: #22252a;
  --border-glow: rgba(124, 131, 253, 0.45);
  --text-primary: #f5f6f8;
  --text-secondary: #9aa0ac;
  --text-tertiary: #7a8190;
  --accent: #6c6cff;
  --accent-soft: rgba(108, 108, 255, 0.12);
  --accent-warm: #ff7a45;
  --bg-canvas-rgb: 8, 9, 11;
  
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

:root.light {
  /* Light mode design tokens */
  --bg-canvas: #ffffff;
  --bg-surface: #f7f7f9;
  --bg-surface-raised: #ffffff;
  --border-subtle: #e7e8ec;
  --border-glow: rgba(79, 70, 229, 0.35);
  --text-primary: #0b0c0f;
  --text-secondary: #565c68;
  --text-tertiary: #6b7280;
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.08);
  --bg-canvas-rgb: 255, 255, 255;
}

/* Custom Tailwind Overrides */
body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Scroll margin top for smooth scroll alignment */
section[id] {
  scroll-margin-top: 96px;
}

/* Noise overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glass and border glows */
.glass {
  background: rgba(var(--bg-canvas-rgb), 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
}

.glow-border {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glow-border:hover {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 1px var(--border-glow), 0 8px 30px rgba(108, 108, 255, 0.15);
}

/* Custom Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 10px;
}

/* Custom display typography */
.text-display-xl {
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.text-display-lg {
  font-size: clamp(1.85rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-display-md {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}