/*
  Дві сторінки, на які веде кнопка з листа. Спільний вигляд — тут.

  Кожен колір і кегль — із `design_handoff_moppy_v1/tokens/tokens.json`,
  літералами: сторінка живе поза збіркою Flutter, тож згенерованих токенів їй
  не дістати, а розходитись із брендбуком вона права не має. Міняється токен —
  міняється й цей файл (сторожить `scripts/auth/host.test.mjs`).

  Тема одна, світла, і це навмисно: сторінку відкривають на секунду з листа,
  показати на ній нічого, крім однієї фрази, а темний варіант — це другий
  набір контрастів, який ніхто ніколи не побачить у парі зі світлим.
*/

@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --background: #FFF5F7;
  --surface: #FFFFFF;
  --text-primary: #2C252A;
  --text-secondary: #6E6068;
  --text-link: #C8243F;
  --coral-tint: #FFE1E7;
  --headsup-bg: #FDEBC8;
  --headsup-ink: #8A5A0F;
  --border: #EFD5DC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text-primary);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  /* Плями тла з макета. Декор, тому за межами потоку й прихований від читача
     екрана: розповідати про рожеві кола нема чого. */
  background-image:
    radial-gradient(circle at 100% 0, #FDE4EA 0, #FDE4EA 28vw, transparent 28vw),
    radial-gradient(circle at 0 82%, #FDE4EA 0, #FDE4EA 26vw, transparent 26vw);
  background-repeat: no-repeat;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 24px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text-primary);
}

.lockup img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: block;
}

.card {
  width: 100%;
  max-width: 640px;
  margin: 40px auto;
  background: var(--surface);
  border-radius: 24px;
  padding: 40px 32px 36px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(44, 37, 42, 0.08);
}

.card img.mascot {
  width: 220px;
  max-width: 62%;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  margin: 8px 0 16px;
}

p.lead {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  margin: 0 auto 28px;
  max-width: 34em;
}

/*
  Смужка з підсумком. Стан у ній завжди СЛОВОМ і іконкою — кольором самим
  нічого не сказано: правило брендбука, і саме воно робить сторінку
  зрозумілою тому, хто кольору не бачить.
*/
.note {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: 18px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.note svg { flex: none; }

.note.calm {
  background: var(--coral-tint);
  color: var(--text-primary);
}

/* Бурштиновий Heads-up, а не червоне: нічого не зламалось, посилання просто
   відслужило своє. */
.note.headsup {
  background: var(--headsup-bg);
  color: var(--headsup-ink);
}

footer {
  margin-top: auto;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
}

footer a {
  color: var(--text-link);
  font-weight: 700;
}

@media (max-width: 520px) {
  h1 { font-size: 30px; line-height: 38px; }
  p.lead { font-size: 16px; line-height: 24px; }
  .card { padding: 28px 20px 24px; margin: 24px auto; }
}