@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader/files/newsreader-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader/files/newsreader-latin-wght-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/files/manrope-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p/files/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Theme-independent tokens. */
html {
  --font-ui: "Manrope", sans-serif;
  --font-display: "Newsreader", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --content-width: 640px;
  --admin-width: 680px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --motion-fast: 0.2s ease;
  --motion-theme: 0.3s ease;
  --icon-size: 32px;
  --touch-size: 44px;
  --focus-ring: currentColor;
  --dialog-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] {
  color-scheme: light;
  --on-error: #fff;
  --bg: #fafaf8;
  --bg-surface: #f2f1ee;
  --ink: #1a1a1a;
  --ink-dim: #6b6b6b;
  --accent: #1a1a1a;
  --accent-soft: #e8e8e6;
  --border: #e5e5e3;
  --surface-hover: #eaeae7;
  --drizzle-tint: #9fb4c7;
  --drizzle-bg: var(--bg);
  --shadow: rgba(0, 0, 0, 0.06);
  --overlay: rgba(250, 250, 248, 0.85);
  --error: #c0392b;
  --success: #27ae60;
  /* sun mode palette (read by the sun canvas via getComputedStyle) */
  --sun-sky-top: #fff7e6;
  --sun-sky-mid: #ffeac6;
  --sun-sky-bottom: #ffdca8;
  --sun-core: #fff0c6;
  --sun-mid: #ffe49a;
  --sun-warm: #ffce66;
  --sun-edge: #ffb646;
  --sun-ray: #ffc96c;
  --sun-glow: #ffdd96;
  --sun-tint: #f0b23c;
  /* tip jar: mostly aliases the palette above; the pixel coin/sun gets its
     own hues since --accent here means ink, not a colour */
  --tip-ink: var(--ink);
  --tip-muted: var(--ink-dim);
  --tip-faint: var(--tip-muted);
  --tip-line: var(--border);
  --tip-field: var(--bg-surface);
  --tip-sheet-bg: #fbfaf7;
  --tip-sheet-border: #e0ddd4;
  --tip-sheet-shadow: 0 34px 90px -34px rgba(27, 27, 25, 0.35);
  --tip-overlay: rgba(27, 27, 25, 0.3);
  --tip-coin: #6f8398;
  --tip-coin-2: #93a6b8;
  --tip-coin-3: #dbe4ec;
  --tip-coin-soft: #a8b8c6;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --on-error: var(--bg);
  --bg: #111111;
  --bg-surface: #1a1a1a;
  --ink: #e5e5e3;
  --ink-dim: #888888;
  --accent: #e5e5e3;
  --accent-soft: #2a2a2a;
  --border: #2a2a2a;
  --surface-hover: #242424;
  --drizzle-tint: #9fb4c7;
  --drizzle-bg: var(--bg);
  --shadow: rgba(0, 0, 0, 0.3);
  --overlay: rgba(17, 17, 17, 0.85);
  --error: #e74c3c;
  --success: #2ecc71;
  --tip-ink: var(--ink);
  --tip-muted: var(--ink-dim);
  --tip-faint: var(--tip-muted);
  --tip-line: var(--border);
  --tip-field: var(--bg-surface);
  --tip-sheet-bg: #191919;
  --tip-sheet-border: #303030;
  --tip-sheet-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.85);
  --tip-overlay: rgba(0, 0, 0, 0.58);
  --tip-coin: #9fb4c7;
  --tip-coin-2: #7d93a8;
  --tip-coin-3: #dfe9f1;
  --tip-coin-soft: #6d8296;
}
/* Moon palette per design_handoff_sanctum_ui/README.md. --accent/--shadow and
   the --tip-* sheet family aren't in that table: they follow the dark block,
   with the coin hues set to the moon values the table does fix. */
html[data-theme="moon"] {
  color-scheme: dark;
  --on-error: var(--bg);
  --bg: #0d1220;
  --bg-surface: #141a2c;
  --ink: #ece8da;
  --ink-dim: #8c92a6;
  --accent: #ece8da;
  --accent-soft: #1f2639;
  --border: #232b40;
  --surface-hover: #1a2134;
  --drizzle-tint: #e9e2c8;
  --drizzle-bg: var(--bg);
  --shadow: rgba(0, 0, 0, 0.45);
  --overlay: rgba(13, 18, 32, 0.82);
  --error: #e07a6a;
  --success: #9cc7a4;
  --tip-ink: var(--ink);
  --tip-muted: var(--ink-dim);
  --tip-faint: var(--tip-muted);
  --tip-line: var(--border);
  --tip-field: var(--bg-surface);
  --tip-sheet-bg: #141a2c;
  --tip-sheet-border: #262e46;
  --tip-sheet-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.85);
  --tip-overlay: rgba(0, 0, 0, 0.58);
  --tip-coin: #e9e2c8;
  --tip-coin-2: #c7c0a2;
  --tip-coin-3: #f4f0df;
  --tip-coin-soft: #a9a48f;
  /* moon mode night sky (read by the moon canvas via getComputedStyle) */
  --moon-sky-top: #080c18;
  --moon-sky-mid: #0d1220;
  --moon-sky-bottom: #141b30;
  --moon-glow: #e9e2c8;
  --moon-star: #ece8da;
  --moon-lit: #f1ecd8;
  --moon-lit-rim: #ddd6bc;
  --moon-lit-crater: #cfc8ad;
  --moon-dark: #1b2235;
  --moon-dark-crater: #161c2d;
  --moon-tint: #e9e2c8;
}
/* Sun mode runs on the light palette with a warm sky painted behind it, so the
   tip sheet gets warm tokens of its own. Scoped to --tip-* on purpose: the rest
   of the app is untouched. */
html[data-sun="1"] {
  --tip-ink: #3a2a18;
  --tip-muted: #8a6f52;
  --tip-faint: var(--tip-muted);
  --tip-line: rgba(120, 80, 40, 0.18);
  --tip-field: rgba(255, 255, 255, 0.55);
  --tip-sheet-bg: #fffaf3;
  --tip-sheet-border: rgba(255, 255, 255, 0.85);
  --tip-sheet-shadow: 0 34px 90px -34px rgba(120, 70, 20, 0.6);
  --tip-overlay: rgba(58, 42, 24, 0.3);
  --tip-coin: #f0b23c;
  --tip-coin-2: #ffce66;
  --tip-coin-3: #fff0c6;
  --tip-coin-soft: #ffd189;
}

html, body { transition: background-color var(--motion-theme), color var(--motion-theme); }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.65;
  font-size: 15px;
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.container { max-width: var(--content-width); margin: 0 auto; padding: 0 20px; }
.display-font, h1, h2, .post-title, .empty-msg {
  font-family: var(--font-display);
  font-weight: 600;
}
button, input, textarea, select { font: inherit; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (forced-colors: active) {
  :where(a, button, input, textarea, select):focus-visible { outline-color: Highlight; }
  .cat-tab.active, .react-btn.reacted, .pill-btn-primary { forced-color-adjust: auto; border: 1px solid ButtonText; }
}

/* === Footer === */
footer {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.75rem;
}