/* Shared by every static marketing/legal page under public/ (the landing
   page and the privacy/terms/safety pages) -- NOT used by invite/join,
   which stay self-contained since they're deep-link fallbacks rather
   than pages someone browses around.

   Dark by default (same navy/orange/gold as the app's own in-app theme,
   src/theme/themes.ts), with a warm light mode as the alternative --
   toggled by the button in the header (see the inline script at the
   bottom of each page) and remembered in localStorage. Both themes share
   the same token names, so every rule below just follows whichever
   palette is active instead of needing its own light/dark variants. */

:root {
  color-scheme: dark;
  --ink: #0B0F1A;
  --ink-raised: #131826;
  --ink-border: #232A3D;
  --mist: #F6F7FB;
  --mist-muted: #A6ACC4;
  --signal: #FF5A3C;
  --signal-dark: #FF7A5C;
  --gold: #FFC94A;
  --gold-dark: #FFC94A;
  --teal: #2FB6C9;
  --section-alt: #0F1420;
  --shadow-tint: 0, 0, 0;
  --font-display: "Baloo 2", "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #FFFCF7;
  --ink-raised: #FFFFFF;
  --ink-border: #F2E4D3;
  --mist: #2B241D;
  --mist-muted: #8C8071;
  --signal: #FF5A3C;
  --signal-dark: #E44A2E;
  --gold: #FFC94A;
  --gold-dark: #E8AE2E;
  --teal: #2FB6C9;
  --section-alt: #FFF4E7;
  --shadow-tint: 43, 36, 29;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink-border);
  background: var(--ink-raised);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--signal); }
.theme-toggle img { display: block; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
}

h1, h2, h3 { font-family: var(--font-display); }

a { color: var(--signal-dark); }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-border);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
}
header.site .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--signal-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}
header.site .logo img {
  width: 30px;
  height: 30px;
}
header.site nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
header.site nav a {
  color: var(--mist-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  margin-left: 12px;
}
header.site nav a:hover { color: var(--signal-dark); }
/* Round chips matching the theme toggle, each carrying its network's own
   colours -- Instagram's gradient glyph, TikTok's cyan/red-edged note. */
header.site nav a.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 38px;
  height: 38px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid var(--ink-border);
  background: var(--ink-raised);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
header.site nav a.social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
header.site nav a.social-icon.tiktok { color: #FFFFFF; }
:root[data-theme="light"] header.site nav a.social-icon.tiktok { color: #111111; }
header.site nav a.social-icon:hover {
  transform: translateY(-1px);
  border-color: var(--signal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
header.site nav a.social-icon + a.social-icon,
header.site nav .theme-toggle { margin-left: 0; }

/* Phones: the logo gets its own row and the links sit on one line under it,
   rather than squeezing beside it and wrapping into a ragged stack. */
@media (max-width: 520px) {
  header.site .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  header.site nav {
    width: 100%;
    justify-content: flex-start;
  }
  header.site nav a { margin-left: 0; margin-right: 8px; }
  header.site nav a.social-icon,
  header.site nav .theme-toggle { width: 34px; height: 34px; margin-right: 0; }
  header.site nav a.social-icon { margin-left: auto; }
  header.site nav a.social-icon + a.social-icon { margin-left: 0; }
}

main.legal {
  padding: 48px 0 80px;
}
main.legal h1 {
  font-size: 2.3rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--signal-dark);
}
main.legal .updated {
  color: var(--mist-muted);
  font-size: 0.85rem;
  margin-bottom: 40px;
}
main.legal h2 {
  font-size: 1.3rem;
  margin: 40px 0 12px;
  color: var(--mist);
}
main.legal p, main.legal li { color: var(--mist-muted); font-size: 0.98rem; }
main.legal ul { padding-left: 22px; }
main.legal strong { color: var(--mist); }
main.legal .callout {
  background: var(--section-alt);
  border: 1px solid var(--ink-border);
  border-radius: 18px;
  padding: 16px 20px;
  margin: 24px 0;
}

footer.site {
  border-top: 1px solid var(--ink-border);
  padding: 28px 0 40px;
}
footer.site .wrap {
  max-width: 960px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
footer.site .links a {
  color: var(--mist-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 20px;
}
footer.site .links a:hover { color: var(--signal-dark); }
footer.site .copy { color: var(--mist-muted); font-size: 0.8rem; }