@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&display=swap');

:root {
  color-scheme: light dark;
  --paper: #F7F2EA;
  --paper-top: #FBF7F0;
  --paper-floor: #EFE6D6;
  --surface: #FFFCF6;
  /* The logo squircle mimics the app icon (warm cream + green Pip), so it
     stays cream in BOTH themes and Pip always reads. */
  --logo-bg: #FBF7F0;
  --ink: #1C1A16;
  --ink-2: #4A463E;
  --ink-3: #8A857B;
  --accent: #2F6F4E;
  --accent-soft: #E4EFE5;
  --hairline: #E4DBCB;
}

/* Match the app: follow the device theme. Dark = the app's "evening" green. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10130F;
    --paper-top: #151712;
    --paper-floor: #0B0F0C;
    --surface: #1A1F19;
    --ink: #F4EFE7;
    --ink-2: #C6C0B6;
    --ink-3: #A8A39A;
    --accent: #7CB89A;
    --accent-soft: #19241C;
    --hairline: #2A3227;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 46%, var(--paper-floor) 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.card {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
}

/* The app-icon logo: Pip on a cream squircle. */
.logo {
  width: 96px; height: 96px; border-radius: 26px; margin-bottom: 22px;
  background: var(--logo-bg) url('/pip.svg') center / 62% no-repeat;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-size: 0; color: transparent; /* hide any legacy text node */
}

h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 34px; letter-spacing: -0.5px; line-height: 1.1;
  margin: 0.2em 0; color: var(--ink);
}
p { color: var(--ink-2); font-size: 16.5px; }
a { color: var(--accent); }

.code {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 42px; font-weight: 800; letter-spacing: 8px;
  margin: 18px 0; color: var(--accent);
}
.hint { font-size: 14px; color: var(--ink-3); }

.links { margin-top: 30px; font-size: 14px; color: var(--ink-3); }
.links a { color: var(--ink-2); text-decoration: none; margin: 0 6px; }
.links a:hover { color: var(--accent); }

/* Legal / support pages: left-aligned long-form on warm paper. */
.doc { max-width: 720px; margin: 0 auto; padding: 56px 24px 96px; text-align: left; }
.doc h1 { font-size: 32px; }
.doc h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 22px; margin-top: 1.8em; color: var(--ink); }
.doc h3 { font-size: 17px; margin-top: 1.4em; color: var(--ink); }
.doc p, .doc li { color: var(--ink-2); font-size: 15.5px; }
.doc a { color: var(--accent); }
.doc hr { border: none; border-top: 1px solid var(--hairline); margin: 2em 0; }
.doc .back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 24px; color: var(--ink-3); text-decoration: none; font-size: 14px; }
.doc .back::before { content: ''; width: 22px; height: 22px; background: url('/pip.svg') center / contain no-repeat; }
.doc .back:hover { color: var(--accent); }
.doc code { background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }