/*
 *  style.css
 *  ewenn — ewenn.app
 *
 *  `_specs/v1-submission.md` §1. Shared by the landing page and the two legal
 *  pages, so the three cannot drift apart.
 *
 *  **The palette is `_docs/DESIGN.md`'s, transcribed rather than reinvented.**
 *  It is named for role the same way the Swift tokens are — a page that called
 *  these `--blue` and `--grey` would be a second, worse vocabulary for colours
 *  the app already has names for. Both themes are here because the app has both
 *  and a visitor's phone is already in one of them.
 *
 *  No build step and no framework, for the reason `pages.ts` gives about
 *  itself: this is a signpost, and a signpost that needs compiling is a second
 *  implementation of something.
 */

:root {
  --background: #f8fcfd;
  --surface: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --action: #137594;
  --hairline: #dde6f4;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #181825;
    --surface: #1e1e2e;
    --text-primary: #cdd6f4;
    --text-secondary: #a6adc8;
    /* `actionPrimary` is the one token that changes hue between themes, so
       that its contrast survives the flip. DESIGN.md: #137594 scores 5.25:1
       with white, #3AAED8 scores 6.44:1 on the dark surface. */
    --action: #3aaed8;
    --hairline: #45475a;
  }
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: Fredoka, ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

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

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* Never let a focus ring go missing on a page whose whole job is links. */
a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 3px;
}

/* MARK: The landing page — one screen, no scroll (§1) */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 4px;
}

/* The app icon, drawn as iOS draws it. The radius is the superellipse's
   approximation — 22.37% of the side, which is what Apple's grid works out to
   and what makes it read as *the icon* rather than as a picture of a penguin. */
.hero__icon {
  width: 128px;
  height: 128px;
  border-radius: 28.6px;
  overflow: hidden;
  display: block;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgb(15 34 51 / 0.16);
}

.hero__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__name {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero__tagline {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  max-width: 22ch;
}

.hero__status {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 28px 0 0;
  padding: 8px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.hero__links {
  margin-top: 36px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__links span {
  color: var(--hairline);
}

/* MARK: The legal pages */

.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.doc__back {
  font-size: 15px;
  display: inline-block;
  margin-bottom: 32px;
}

.doc h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.doc__updated {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 40px;
}

.doc h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.doc h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.doc h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 8px;
}

.doc p,
.doc li {
  color: var(--text-primary);
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin-bottom: 8px;
}

.doc strong {
  font-weight: 600;
}

/* A short aside that matters more than its length — used for the claims a
   reader is least likely to expect, like the photograph never being uploaded. */
.doc__note {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}

.doc__note p {
  margin: 0;
}

.doc__footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.doc__footer span {
  color: var(--hairline);
}

@media (max-width: 480px) {
  .hero__name {
    font-size: 34px;
  }

  .hero__tagline {
    font-size: 17px;
  }

  .doc {
    padding: 40px 20px 72px;
  }

  .doc h1 {
    font-size: 27px;
  }
}