/* ── Reset + app shell ─────────────────────────────────────────────────── */

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

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html { height: 100%; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  /* Nothing but the sheet should ever scroll horizontally. */
  overflow-x: hidden;
}

/* The warm sunrise wash behind everything. Fixed so it doesn't scroll away. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  background:
    radial-gradient(120% 70% at 12% 0%, var(--bg-glow-1), transparent 60%),
    radial-gradient(100% 60% at 90% 4%, var(--bg-glow-2), transparent 62%);
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; touch-action: manipulation; }

a { color: var(--brand); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--sun-1);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

#app {
  position: relative;
  z-index: 1;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  padding: calc(var(--safe-t) + var(--s-4)) var(--s-4)
           calc(var(--nav-h) + var(--safe-b) + var(--s-6));
  animation: viewIn var(--t-med) var(--ease-out) both;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.muted { color: var(--ink-3); }
.tiny  { font-size: 0.8rem; }
.num   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.grad-text {
  background: var(--gradient-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:root[data-motion='calm'] *,
:root[data-motion='calm'] *::before,
:root[data-motion='calm'] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 60ms !important;
}