@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --color-bg-base: #0f1211;
  --color-bg-elevated: #161b1a;
  --color-bg-floating: #1c2422;
  --color-brand: #02d6a1;
  --color-brand-glow: rgba(2, 214, 161, 0.3);
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;

  --shadow-elevated: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 3px rgba(2, 214, 161, 0.05);
  --shadow-floating: 0 12px 30px -4px rgba(0, 0, 0, 0.6), 0 0 5px rgba(2, 214, 161, 0.1);
  
  --spring-easing: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.112 22.6%, 1.125 24.3%, 1.126 25.9%, 1.085 32.2%, 1.046 36%, 1.016 40.4%, 0.99 46.5%, 0.985 49.3%, 0.985 52.8%, 0.999 64.9%, 1.002 72.8%, 1);
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: 1.7;
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.font-display {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.03em;
}

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

/* Gradients */
.bg-radials {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: 
    radial-gradient(circle at 15% 50%, rgba(2, 214, 161, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(10, 143, 118, 0.06) 0%, transparent 40%);
}

/* Layers */
.layer-elevated {
  background-color: var(--color-bg-elevated);
  box-shadow: var(--shadow-elevated);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.layer-floating {
  background-color: var(--color-bg-floating);
  box-shadow: var(--shadow-floating);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Interactive states & Spring animation */
.interactive-card {
  transition: transform 0.6s var(--spring-easing), opacity 0.3s ease;
}

.interactive-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.interactive-card:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  transform: translateY(-4px);
}

.interactive-card:active {
  transform: scale(0.97);
}

/* Image treatment */
.img-container {
  position: relative;
  overflow: hidden;
}

.img-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  pointer-events: none;
}

.img-treatment {
  mix-blend-mode: multiply;
  background-color: rgba(2, 214, 161, 0.2);
}

.btn-primary {
  background-color: var(--color-brand);
  color: #000;
  transition: transform 0.4s var(--spring-easing), opacity 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

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

.btn-primary:active {
  transform: translateY(0) scale(0.95);
}