@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #f7f2ea;
  --bg-2: #f1e7d8;
  --surface: #fffdf7;
  --surface-2: #fff3e0;
  --surface-3: #ffe5c6;
  --stroke: rgba(32, 38, 48, 0.12);
  --stroke-strong: rgba(32, 38, 48, 0.22);
  --text: #1f2530;
  --muted: #5e6a7a;
  --accent: #ff8a3d;
  --accent-2: #2ec4b6;
  --accent-3: #ffb454;
  --success: #22c979;
  --warning: #f4b23f;
  --danger: #ff6b6b;
  --focus: rgba(46, 196, 182, 0.25);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-1: 0 16px 32px rgba(44, 42, 32, 0.12);
  --shadow-2: 0 28px 64px rgba(44, 42, 32, 0.2);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;
  --space-6: 36px;
  --tap: 54px;
  --bottom-nav-h: 74px;
  --font-sans: "Sora", "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-display: "Space Grotesk", "Sora", "Trebuchet MS", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -8vh 0 0;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
}

html::before {
  background-image:
    radial-gradient(120% 90% at 10% 0%, rgba(255, 180, 84, 0.35), transparent 60%),
    radial-gradient(90% 80% at 92% 8%, rgba(46, 196, 182, 0.25), transparent 55%),
    radial-gradient(120% 100% at 50% 100%, rgba(255, 138, 61, 0.2), transparent 65%);
}

html::after {
  background-image: radial-gradient(rgba(32, 38, 48, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  min-height: 100vh;
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(255, 138, 61, 0.25);
  color: #1f2530;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}