/* Tonite web — tokens mirror apps/mobile/constants/theme.ts and PRD §5 */
:root {
  --bg: #08080c;
  --surface: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.08);
  --accent: #e50914; /* oklch(0.55 0.23 27) */
  --accent-dark: #c4070f;
  --gold: #d4a843; /* oklch(0.74 0.12 85) */
  --text: #e8e6e1;
  --text-body: #a9a6a0; /* 4.9:1 on --bg */
  --text-dim: #8f8c86;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--gold);
  text-decoration-color: rgba(212, 168, 67, 0.4);
  text-underline-offset: 3px;
  border-radius: 2px;
}

a:hover {
  color: #e6bd5d;
  text-decoration-color: currentColor;
}

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

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Landing ---------- */

.landing {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  text-align: center;
}

.landing-inner {
  max-width: 34rem;
}

.landing .logo {
  width: clamp(96px, 22vw, 140px);
  height: auto;
  margin-bottom: 1.75rem;
}

.wordmark {
  font-size: clamp(3rem, 10vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  line-height: 1;
}

.tagline {
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  line-height: 1.35;
  margin: 0 0 1.5rem;
}

.tagline .plain {
  font-weight: 700;
}

.tagline .flair {
  font-style: italic;
  color: var(--gold);
}

.pitch {
  color: var(--text-body);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto 2.5rem;
  max-width: 28rem;
}

.soon {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--accent);
  background: rgba(229, 9, 20, 0.12);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  box-shadow: 0 0 32px rgba(229, 9, 20, 0.25);
}

/* ---------- Shared footer ---------- */

.site-footer {
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

.landing + .site-footer {
  margin-top: -4rem;
}

.site-footer nav {
  display: flex;
  gap: 1.75rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.site-footer a {
  color: var(--text-body);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---------- Legal pages ---------- */

.legal {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 1rem;
}

.legal-home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.legal-home img {
  width: 28px;
  height: auto;
}

.legal h1 {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 900;
  margin: 0.75rem 0 0.5rem;
  line-height: 1.1;
}

.updated {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0 0 2.25rem;
}

.legal h2 {
  font-size: 1.25rem;
  margin: 2.25rem 0 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.legal p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

.legal strong {
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .landing-inner {
    animation: rise 0.6s ease-out both;
  }

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