@charset "UTF-8";

/* Shared visual tokens for Wrapped, contribution and administration. */
:root {
  color-scheme: light;
  --page: #f5f5f0;
  --surface: #ffffff;
  --ink: #25312b;
  --muted: #59645c;
  --sage: #566d60;
  --soft: #eaeee8;
  --line: #d5dbd3;
  --line-strong: #819083;
  --focus: #356047;
  --error: #9b3d34;
  --birthday-accent: #99713f;
  --birthday-soft: #f1e8d8;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A small wrapped gift follows the shared brand on every page and view. */
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand::before {
  content: '';
  display: inline-block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  pointer-events: none;
  background-color: var(--birthday-accent);
  -webkit-mask: url('/gift.svg') center / contain no-repeat;
  mask: url('/gift.svg') center / contain no-repeat;
}
.topbar, .app-header { position: relative; }
.topbar::after, .app-header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--birthday-accent) 0 42px, transparent 42px calc(100% - 12px), var(--birthday-accent) calc(100% - 12px));
  pointer-events: none;
}
.birthday-art {
  display: block;
  width: 164px;
  height: 128px;
  max-width: 100%;
  overflow: visible;
  color: var(--birthday-accent);
  pointer-events: none;
}
.birthday-art .cake-fill { fill: var(--birthday-soft); }
.birthday-art .cake-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.birthday-art .cake-flame, .birthday-art .confetti { fill: currentColor; }
.birthday-art .cake-sage { stroke: var(--sage); }

@media (max-width: 620px) {
  .brand::before { flex-basis: 24px; width: 24px; margin-right: 8px; }
}