/*
 * saveroom.app: the one stylesheet for every page, static and rendered.
 *
 * Why one file: the pages are few and small, and the Pages Functions
 * (web/functions) render the same classes, so a change here reaches every page.
 * The look follows the mockups (design doc 7.1, the four saveroom.app pages of
 * version 5 part 2): cream page, white cards with a warm border, one ink button.
 *
 * Colors come only from the tokens below, never a hex further down, so light and
 * dark stay in step. The values are the approved palette (brand/README.md,
 * section 10; design doc 7.2). The site follows the browser's Light or Dark
 * setting, as the app follows the phone's (design doc 7.2, "Dark mode: yes").
 *
 * No inline styles anywhere: the Content-Security-Policy (web/public/_headers and
 * web/src/respond.ts) allows styles from this file only.
 */

:root {
  color-scheme: light dark;

  /* Light theme (brand/README.md, section 10). */
  --page: #FBF6EE; /* cream */
  --card: #FFFFFF;
  --text: #1F1A17; /* ink */
  --text-secondary: #6B625B; /* 5.6:1 on cream */
  --border: #E8DFD2;
  --track: #EFE6D8; /* the recessed shade: the step badge, the invite-only box */
  --button: #1F1A17; /* filled buttons are ink with cream text in light */
  --button-text: #FBF6EE;
  --icon-glyph: #9C8B78;

  /* The same in both themes. Friends' avatars keep their pastel and ink initials
     in dark (design doc 7.2), and the QR code stays ink on white because phone
     cameras read dark-on-light most reliably. */
  --pastel-sand: #D9C7B8;
  --on-pastel: #1F1A17;
  --qr-tile: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme: the brand reversed (brand/README.md, section 10). Cards stop
       at #26201C, the lightest shade the cherry heart still reads on (3:1). */
    --page: #1F1A17;
    --card: #26201C;
    --text: #FBF6EE;
    --text-secondary: #A89D93; /* 6.5:1 on the page, 6.1:1 on cards */
    --border: #3A322C;
    --track: #120F0D; /* recessed below the page */
    --button: #FBF6EE; /* filled buttons turn cream with ink text in dark */
    --button-text: #1F1A17;
    --icon-glyph: #A0907E;
  }
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The system font, as in the app (design doc 7.2 and 7.4): Besley is for the
   logo only, and the logo is a drawn file, so the site loads no web font at all.
   Weights follow 7.4 too: 400 for text, 500 for titles, names and buttons. */
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui,
    "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a {
  color: var(--text);
}

/* A visible focus ring for keyboard users, in the text color so it shows in
   both themes. */
a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
p,
ol,
ul {
  margin: 0;
}

/* Static pages hold their text in English, French and Italian; the inline script
   in each page's head sets data-lang on <html> from the browser's languages, and
   these rules hide the other two (design doc 7.2: pages follow the browser's
   language). Without the script, data-lang stays "en" and English shows. */
html[data-lang="en"] [data-l]:not([data-l="en"]),
html[data-lang="fr"] [data-l]:not([data-l="fr"]),
html[data-lang="it"] [data-l]:not([data-l="it"]) {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Page frame: logo at the top, content centered, footer at the bottom
 * ------------------------------------------------------------------------- */

.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px 28px;
}

/* The computer page is a wider frame (the mockup's computer-size page). */
.shell--computer {
  padding: 56px 24px 28px;
}

/* The home page puts the logo inside its content column, a little lower. */
.shell--home {
  padding-top: 72px;
}

.brand-link {
  display: block;
  border-radius: 8px;
}

/* The stacked logo. Its files carry their own clear space (brand/README.md, 4),
   and every size here stays well above the 60 px minimum. */
.logo {
  display: block;
  width: 150px;
  height: auto;
}

.logo--home {
  width: 220px;
}

.logo--computer {
  width: 168px;
}

.logo--legal {
  width: 120px;
}

.content {
  flex-grow: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px 0;
}

.content--computer {
  max-width: 540px;
  gap: 14px;
  padding: 28px 0;
}

.content--home {
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 0;
}

.content--legal {
  max-width: 680px;
  justify-content: flex-start;
  gap: 14px;
  padding-top: 28px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.shell--computer .footer {
  gap: 6px 16px;
  font-size: 13px;
}

.footer a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Cards and text
 * ------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
}

.card--computer {
  padding: 28px;
}

.card--center {
  align-items: center;
  gap: 10px;
  padding: 24px 18px 20px;
  text-align: center;
}

/* The home page's two small cards (Invite-only for now; Questions). */
.card--small {
  align-self: stretch;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
}

.title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.title--computer {
  font-size: 28px;
}

.card--center .title {
  margin-top: 4px;
}

.subtitle {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.body {
  font-size: 15px;
  line-height: 1.5;
}

.body--computer {
  font-size: 17px;
}

.secondary {
  color: var(--text-secondary);
}

.small {
  font-size: 14px;
  line-height: 1.45;
}

.strong {
  font-weight: 500;
}

/* "Your invitation still works. This page didn't use it." */
.note {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.shell--computer .note {
  font-size: 14px;
}

.tagline {
  max-width: 300px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.lede {
  text-align: center;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
 * Buttons and links
 * ------------------------------------------------------------------------- */

/* The one filled button (design doc 7.2: one ink button per card). 50 px tall,
   so it clears the 44 px touch target the app keeps too (docs/app-build.md 7.3). */
.button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.card--center .button {
  align-self: stretch;
  margin-top: 6px;
}

/* "Already have the app? Open Save Room": a quiet link, 44 px tall to tap. */
.quiet-link {
  align-self: center;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
}

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

/* hello@saveroom.app on the home page: the contact Apple's guideline 1.2 asks
   for (design doc 7.2, "The home page is the contact page"). */
.mail-link {
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Pieces of the link pages
 * ------------------------------------------------------------------------- */

/* The phone in a soft square at the top of the computer page. */
.icon-square {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--track);
  color: var(--text);
}

/* The QR box: code on the left, words on the right. */
.qr-box {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
  padding: 16px;
  border-radius: 16px;
  background: var(--page);
  border: 1px solid var(--border);
}

.qr-box__words {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qr-box__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.qr {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  padding: 4px;
  border-radius: 10px;
  background: var(--qr-tile);
}

.qr img {
  display: block;
  width: 104px;
  height: 104px;
}

/* The two steps on the iPhone page. */
.steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step .button {
  flex-grow: 1;
}

.step__badge {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--track);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.step__badge--filled {
  background: var(--button);
  color: var(--button-text);
}

/* A friend's initials, in a friend's pastel with ink initials (design doc 7.2). */
.avatar {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--pastel-sand);
  color: var(--on-pastel);
  font-size: 20px;
  font-weight: 600;
}

/* "Not on Save Room? It's invite-only for now..." (design doc 7.2: a friend link
   without an account says invite-only, nothing more). */
.callout {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--track);
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * Terms and privacy
 * ------------------------------------------------------------------------- */

.legal-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal h1 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.legal h2 {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.55;
}

.legal ul {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The draft banner, so nobody mistakes the drafts for final text. */
.draft {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--track);
  font-size: 14px;
  line-height: 1.45;
}

/* Narrow phones: the QR box stacks, so the words keep a readable width. */
@media (max-width: 420px) {
  .qr-box {
    flex-direction: column;
    align-items: flex-start;
  }
}