/**
 * TIDE-inspired theme layer (Figma reference: Mobbin TIDE iOS screenshots)
 * Overrides semantic tokens after base/variables.css. No Tailwind.
 */

:root {
  /* Dark botanical base (charcoal + green undertone) */
  --bg-base: #070c0a;
  --bg-void: var(--bg-base);
  --bg-primary: rgba(10, 16, 14, 0.72);
  --bg-secondary: rgba(12, 20, 17, 0.78);
  --bg-tertiary: rgba(18, 28, 24, 0.85);
  --bg-elevated: rgba(22, 32, 28, 0.92);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);

  --text-primary: #f4f7f5;
  --text-secondary: rgba(244, 247, 245, 0.72);
  --text-muted: rgba(244, 247, 245, 0.48);
  --text-disabled: rgba(244, 247, 245, 0.28);

  /* Sage accent — focus, toggles, badges (not primary CTA fill) */
  --accent: #5f7d6e;
  --accent-hover: #739183;
  --accent-muted: rgba(95, 125, 110, 0.22);
  --accent-subtle: rgba(95, 125, 110, 0.12);
  --accent-color: var(--accent);
  --border-accent: rgba(160, 190, 175, 0.35);

  /* TIDE-style primary actions (white pill) */
  --btn-primary-bg: #f2f4f3;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-fg: #0a120e;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --hover-bg: var(--bg-hover);
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-default);
  --input-focus-border: var(--border-strong);
  --button-bg: var(--bg-tertiary);
  --button-hover: var(--bg-hover);

  --bg-gradient-primary: var(--bg-primary);
  --bg-gradient-card: var(--bg-secondary);
  --bg-gradient-input: var(--bg-tertiary);
  --accent-gradient: var(--accent);

  /* Full-page atmosphere: gradient simulates blurred foliage (swap for WebP via --tide-photo-bg) */
  --tide-photo-bg: none;
  --tide-bg-scrim: linear-gradient(
    180deg,
    rgba(5, 10, 8, 0.55) 0%,
    rgba(7, 14, 11, 0.75) 45%,
    rgba(5, 10, 8, 0.88) 100%
  );
  --tide-bg-gradient: radial-gradient(
      ellipse 120% 80% at 50% 0%,
      rgba(45, 72, 58, 0.45) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 60% at 100% 100%,
      rgba(30, 55, 45, 0.35) 0%,
      transparent 50%
    ),
    linear-gradient(165deg, #050a08 0%, #0a1410 40%, #06100c 100%);

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-elevated: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 18px;

  /* Audio Lab / mobile bundle (ember names → TIDE sage) */
  --accent-ember: var(--accent);
  --accent-ember-soft: #8aab9c;
  --accent-ember-dim: var(--accent-muted);
  --accent-ember-glow: rgba(95, 125, 110, 0.38);
}

body {
  background-color: var(--bg-base);
  background-image: var(--tide-bg-scrim), var(--tide-photo-bg), var(--tide-bg-gradient);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-attachment: fixed, fixed, fixed;
  background-position: center, center, center;
}

/* Slow ambient drift — light moving through foliage (above body bg, below UI) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
      ellipse 130% 100% at 35% 15%,
      rgba(45, 72, 58, 0.35) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 100% 90% at 85% 85%,
      rgba(30, 55, 45, 0.28) 0%,
      transparent 50%
    );
  background-repeat: no-repeat, no-repeat;
  background-size: 180% 180%, 160% 160%;
  animation: tideAmbientDrift 72s ease-in-out infinite alternate;
}

@keyframes tideAmbientDrift {
  0% {
    background-position: 0% 0%, 100% 100%;
  }
  100% {
    background-position: 100% 60%, 0% 40%;
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tide-glass {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --glass-blur: 8px;
  }

  body {
    background-attachment: scroll;
  }

  body::after {
    animation: none;
  }
}

/* Optional: set on a wrapper for marketing / legacy pages */
.tide-hero-bg {
  background-image: var(--tide-bg-scrim), var(--tide-photo-bg), var(--tide-bg-gradient);
  background-size: cover;
  background-position: center;
  color: var(--text-primary);
}

.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-panel {
    background: var(--bg-elevated);
  }
}

.btn-pill-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition-fast);
}

.btn-pill-primary:hover {
  background: var(--btn-primary-bg-hover);
}

.btn-pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background var(--transition);
}

.btn-pill-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}