/* unawkward.app, one stylesheet for the landing and the three text pages.

   The tokens are the app's (app/ios/Unawkward/DesignSystem/Tokens.swift, v10):
   paper and ink, the dusty blue accent, and the mark's two bodies. The site
   follows the system appearance the way the app does, so both palettes are
   here and the light one is the default, which is also the icon's ground. */

:root {
  --bg: #F5F4F1;
  --ink: #1A1A1A;
  --body: #2E2B28;
  --meta: #6D6963;
  --border: #EEEBE7;
  --border-control: #D4D4D4;
  --accent: #526F88;
  --accent-surface: #EAF0F4;
  --accent-border: #D6E0E8;
  --bubble-left: #A9C8DC;
  --bubble-right: #526F88;
  --on-ink: #FAFAFA;
  /* A phrase that landed, at the alpha the app uses on this appearance. One
     number cannot serve paper and near-black: the dark tints are lighter, so
     22% over black barely lifts off it. */
  --wash-green: rgba(66, 111, 80, 0.22);
  --wash-red: rgba(166, 69, 69, 0.22);
  --green: #426F50;
  --red: #A64545;
  --surface: #FFFFFF;
  --shadow: 0 24px 40px rgba(26, 26, 26, 0.14);
  --scrim: rgba(245, 244, 241, 0.9);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A;
    --ink: #FAFAFA;
    --body: #E8E6E3;
    --meta: #8A8A8A;
    --border: #242424;
    --border-control: #333333;
    --accent: #9EBBD2;
    --accent-surface: #18232C;
    --accent-border: #354B5D;
    --bubble-left: #BDD9EA;
    --bubble-right: #80A8C5;
    --on-ink: #0A0A0A;
    --wash-green: rgba(143, 191, 159, 0.4);
    --wash-red: rgba(224, 140, 140, 0.4);
    --green: #8FBF9F;
    --red: #E08C8C;
    --surface: #141414;
    --shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
    --scrim: rgba(10, 10, 10, 0.86);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0A0A0A;
    --ink: #FAFAFA;
    --body: #E8E6E3;
    --meta: #8A8A8A;
    --border: #242424;
    --border-control: #333333;
    --accent: #9EBBD2;
    --accent-surface: #18232C;
    --accent-border: #354B5D;
    --bubble-left: #BDD9EA;
    --bubble-right: #80A8C5;
    --on-ink: #0A0A0A;
    --wash-green: rgba(143, 191, 159, 0.4);
    --wash-red: rgba(224, 140, 140, 0.4);
    --green: #8FBF9F;
    --red: #E08C8C;
    --surface: #141414;
    --shadow: 0 30px 50px rgba(0, 0, 0, 0.7);
    --scrim: rgba(10, 10, 10, 0.86);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The joined wordmark, as on Home: UN in the accent, AWKWARD in ink. */
.nav { display: flex; align-items: center; padding: 26px 40px; }
.wordmark {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark b { font-weight: 600; color: var(--accent); }
.kicker { margin-left: auto; font-size: 13px; color: var(--meta); }

/* Supporting metadata is sentence-case Geist at 13px, never tracked caps. */
.meta { font-size: 13px; color: var(--meta); }

footer {
  padding: 26px 24px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--meta);
}
footer a { color: var(--meta); }
footer a:hover { color: var(--ink); }

/* Text pages: privacy, terms, support. */
.page main { max-width: 62ch; margin: 0 auto; padding: 20px 24px 90px; }
.page h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 8px; }
.page .updated { font-size: 13px; color: var(--meta); margin: 0 0 40px; }
.page h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 38px 0 10px; }
.page p, .page li { color: var(--body); font-size: 16px; }
.page ul { padding-left: 20px; }
.page li { margin-bottom: 8px; }
.page strong { color: var(--ink); font-weight: 600; }
.page hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0 0; }
.contact {
  background: var(--accent-surface);
  border: 1px solid var(--accent-border);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 0 0 8px;
}
.contact p { margin: 0; }
.contact .address { font-size: 19px; font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
  .nav { padding: 22px 24px; }
  .page h1 { font-size: 30px; }
}

/* A quiet sun/moon control, matching the SAPPER site-bar pattern. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin-left: 16px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); cursor: pointer; transition: background .18s ease; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-moon, [data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 640px) {
  .nav { gap: 8px; }
  .theme-toggle { margin-left: 4px; flex-basis: 44px; width: 44px; height: 44px; }
  .nav .store { font-size: 12px; }
}
@media (max-width: 360px) {
  .nav { padding-left: 16px; padding-right: 16px; }
  .wordmark { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }