/* Dobdob public pages. Tokens mirror app/src/theme/tokens.ts. */
@font-face { font-family: 'Lilita One'; src: url('/fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --ink: #1C1B1A; --cream: #FFF4DE; --white: #FFFFFF; --green: #5BD16B; --tomato: #FF6B5B;
  --yellow: #FFD84D; --muted: #5A554C; --strong: #3D3A34; --bubble: #EFEAE0;
  --bg: var(--cream); --surface: var(--white); --text: var(--ink); --text-muted: var(--muted);
  --line: var(--ink); --shadow: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141210; --surface: #24211D; --text: #FFF4DE; --text-muted: #B9AF9E; --strong: #FFF4DE;
          --line: #F3E6CC; --shadow: #F3E6CC; --bubble: #2D2924; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; line-height: 1.4; }
main { min-height: 100dvh; max-width: 480px; margin: 0 auto; padding: 28px 22px calc(24px + env(safe-area-inset-bottom));
       display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.wordmark { font-family: 'Lilita One', system-ui, sans-serif; font-size: 26px; }
h1 { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: clamp(28px, 8vw, 36px); line-height: 1.05; margin: 0; }
p { margin: 0; }
.lede { font-weight: 700; font-size: 17px; color: var(--strong); }
.card { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; text-align: left;
        background: var(--surface); border: 3px solid var(--line); border-radius: 20px; box-shadow: 5px 5px 0 var(--shadow); }
.label { font-weight: 900; font-size: 13px; color: var(--text-muted); letter-spacing: .02em; }
.bubble { padding: 12px 14px; background: var(--bubble); border-radius: 16px 16px 16px 4px; font-weight: 700; font-size: 15px; }
.actions { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
button.primary, a.primary {
  min-height: 62px; width: 100%; background: var(--green); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); font-family: 'Lilita One', system-ui, sans-serif; font-size: 22px;
  cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; padding: 8px 16px;
}
button.primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
button.primary.danger { background: var(--tomato); }
button.link { min-height: 48px; background: transparent; border: none; color: var(--strong); font: inherit; font-weight: 900;
              font-size: 16px; text-decoration: underline; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
.small { font-weight: 700; font-size: 13px; color: var(--text-muted); }
.small a { color: inherit; }
.gary { width: 150px; height: 170px; }
.hidden { display: none !important; }
.skeleton { background: var(--bubble); border-radius: 12px; min-height: 1.2em; width: 80%; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.prose { text-align: left; font-weight: 700; }
.prose h2 { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 22px; margin: 18px 0 6px; }
.prose p, .prose li { margin: 0 0 10px; }