/* LiveLov brand tokens and shared pieces (wordmark, Lovi, archetype cards).
   Palette: Sunbeam #FFB8E2, Apricot #F483FB, Coral #DE412F, Poppy #DE412F, Berry #C81558.
   Neutrals: Paper #FBF4CD, Cream #FFFDF5, Ink #2B0F2E. Type: Fredoka (display), Nunito (text). */
:root {
  --sunbeam: #FFB8E2;
  --apricot: #F483FB;
  --coral: #DE412F;
  --poppy: #DE412F;
  --berry: #C81558;
  --paper: #FBF4CD;
  --cream: #FFFDF5;
  --ink: #2B0F2E;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Wordmark: "Live" in Berry, "L" and "v" in Poppy, and a heart with eyes as the "o". Size it with font-size. */
.wm {
  display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 600;
  line-height: 1; letter-spacing: -0.01em; text-decoration: none;
}
.wm .wm-live { color: var(--berry); }
.wm .wm-lv { color: var(--poppy); }
.wm .wm-o { width: 0.66em; height: 0.63em; margin: 0 0.015em 0 0.02em; position: relative; top: 0.03em; flex: none; color: var(--poppy); }
.wm.on-dark .wm-live, .wm.on-dark .wm-lv { color: var(--cream); }
.wm.on-dark .wm-o { color: var(--sunbeam); }

/* Lovi, the heart character. */
.lovi { overflow: visible; display: inline-block; flex: none; vertical-align: middle; }

/* Archetype card (profile screen). Colors come from the variables set inline. */
.arch-card {
  border-radius: 28px; padding: 20px 22px 22px; background: var(--arch-bg); color: var(--arch-fg);
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.arch-card .arch-top { display: flex; justify-content: space-between; align-items: center; }
.arch-card .arch-code {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; border: 2px solid var(--arch-fg);
  border-radius: 999px; padding: 3px 10px;
}
.arch-card .arch-art { display: flex; justify-content: center; padding: 6px 0 2px; }
.arch-card .arch-art svg { width: 200px; height: 150px; }
.arch-card .arch-name { font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; line-height: 1; }
.arch-card .arch-tagline { font-weight: 700; font-size: 0.95rem; line-height: 1.4; }