/* =============================================================
   base.css — reset, design tokens, theming, global primitives
   ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  transition: background .5s ease, color .5s ease;
}

/* ---- Design tokens : light theme (default) ---- */
:root,
[data-theme="light"] {
  --bg:           #eef4ef;
  --bg2:          #e3ede4;
  --text:         #14201a;
  --muted:        #5c6b62;
  --glass:        rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .72);
  --field:        rgba(255, 255, 255, .5);
  --accent:       #1f9d6b;
  --accent-2:     #2bb37d;
  --accent-soft:  rgba(63, 191, 143, .18);
  --shadow:       rgba(20, 40, 30, .10);
  --blob1:        #8fe3c0;
  --blob2:        #cfeede;
}

/* ---- Design tokens : dark theme ---- */
[data-theme="dark"] {
  --bg:           #07120d;
  --bg2:          #0c1c14;
  --text:         #eaf3ee;
  --muted:        #8aa396;
  --glass:        rgba(18, 38, 28, .5);
  --glass-border: rgba(120, 200, 160, .16);
  --field:        rgba(18, 38, 28, .5);
  --accent:       #4fe0a3;
  --accent-2:     #4fe0a3;
  --accent-soft:  rgba(79, 224, 163, .16);
  --shadow:       rgba(0, 0, 0, .45);
  --blob1:        #1f8a5b;
  --blob2:        #0e3a28;
}

/* ---- Typography helpers ---- */
.display { font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; }

h1, h2, h3 { font-family: "Bricolage Grotesque", sans-serif; margin: 0; }

/* ---- Animations ---- */
@keyframes vfloat  { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(-16px); } }
@keyframes vfloat2 { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(22px); } }
@keyframes vdrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.08); }
  66%  { transform: translate(-30px, 20px) scale(.96); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Scrollbar ---- */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 20px; }

/* ---- App shell + ambient background blobs ---- */
.app-root {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.blob--1 {
  top: -180px; left: -120px; width: 560px; height: 560px;
  background: radial-gradient(circle at 30% 30%, var(--blob1), transparent 70%);
  filter: blur(40px); opacity: .7;
  animation: vdrift 22s ease-in-out infinite;
}
.blob--2 {
  bottom: -220px; right: -160px; width: 640px; height: 640px;
  background: radial-gradient(circle at 60% 40%, var(--blob2), transparent 70%);
  filter: blur(50px); opacity: .65;
  animation: vdrift 28s ease-in-out infinite reverse;
}
.blob--3 {
  top: 40%; left: 55%; width: 360px; height: 360px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  filter: blur(60px); opacity: .18;
  animation: vfloat 14s ease-in-out infinite;
}

/* ---- Layout container ---- */
.container {
  position: relative;
  z-index: 10;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 28px 80px;
}
.container--nav { z-index: 20; padding: 22px 28px; }
.container--narrow { max-width: 1180px; }

/* ---- Shared glass surface ---- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px var(--shadow);
}

.spacer-lg { height: 90px; }

@media (max-width: 900px) {
  .container { padding: 16px 18px 70px; }
}