/* design-system.css - Made in Gab Landing */

:root {
  /* Colors - Premium Nocturnal Palette */
  --bg-premium: #0a0a0c;
  --bg-premium-rgb: 10, 10, 12;
  
  /* Gabonese Flag Accents */
  --accent-green: #006847;
  --accent-yellow: #fcd116;
  --accent-blue: #002a9e;
  
  /* Text */
  --text-primary: #f8f9fa;
  --text-secondary: rgba(248, 249, 250, 0.6);
  --text-tertiary: rgba(248, 249, 250, 0.3);
  
  /* Glassmorphism & Surfaces */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-bright: rgba(255, 255, 255, 0.15);
  
  /* Spacing & Radius */
  --radius-lg: 32px;
  --radius-md: 16px;
  --spacing-xl: 80px;
  --spacing-lg: 48px;
  --spacing-md: 24px;
  
  /* Typography */
  --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Elevations */
  --shadow-premium: 0 20px 80px rgba(0, 0, 0, 0.5);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-premium);
  color: var(--text-primary);
  font-family: var(--font-inter);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Atmospheric Backdrop */
.atmospheric-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, #16211d 0%, var(--bg-premium) 70%);
  overflow: hidden;
}

.atmospheric-backdrop::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}

.glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(0, 104, 71, 0.15) 0%, transparent 70%);
  top: -10vw;
  right: -10vw;
  filter: blur(80px);
  pointer-events: none;
}

.glow-2 {
  position: absolute;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(0, 42, 158, 0.1) 0%, transparent 70%);
  bottom: -5vw;
  left: -5vw;
  filter: blur(60px);
  pointer-events: none;
}