/* Design tokens v2 (redesign, owner decisions 2026-10-05): the device's own font, one near-black ink at a few
   strengths, soft flat cards and a dark mode. Every page uses these (redesign steps 2 to 5). A page tinted
   from its flyer (class "is-tinted" with --tint set) turns everything light-on-dark. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --bg: #f7f7f6;
  --surface: #ffffff;
  --card: rgba(255, 255, 255, 0.86);
  --card-edge: #ffffff;
  --ink: #16161a;
  --ink-2: rgba(22, 22, 26, 0.72);
  --ink-3: rgba(22, 22, 26, 0.6);
  --line: rgba(22, 22, 26, 0.09);
  --fill: rgba(22, 22, 26, 0.05);
  --fill-2: rgba(22, 22, 26, 0.09);
  --on-ink: #ffffff;
  --link: #5926a6;
  --focus: #5926a6;
  --good: #17703f;
  --good-bg: rgba(30, 140, 80, 0.12);
  --note: #8a4a09;
  --note-bg: rgba(214, 120, 20, 0.14);
  /* Buzz It: white text stays above 4.5:1 across the whole gradient. */
  --buzz: linear-gradient(100deg, #5926a6 0%, #a32c80 50%, #c4461f 100%);
  --buzz-text: var(--buzz);
  --radius-card: 24px;
  --radius-image: 16px;
  --radius-tile: 10px;
  --shadow-image: 0 18px 44px rgba(0, 0, 0, 0.16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f12;
    --surface: #18181c;
    --card: rgba(255, 255, 255, 0.055);
    --card-edge: rgba(255, 255, 255, 0.07);
    --ink: #f3f3f5;
    --ink-2: rgba(243, 243, 245, 0.74);
    --ink-3: rgba(243, 243, 245, 0.62);
    --line: rgba(255, 255, 255, 0.1);
    --fill: rgba(255, 255, 255, 0.07);
    --fill-2: rgba(255, 255, 255, 0.12);
    --on-ink: #0f0f12;
    --link: #c4b1ff;
    --focus: #c4b1ff;
    --good: #84d9a6;
    --good-bg: rgba(60, 190, 110, 0.15);
    --note: #f3b56b;
    --note-bg: rgba(230, 140, 40, 0.16);
    --buzz-text: linear-gradient(100deg, #b9a2ff, #ff86bf, #ffa36b);
    --shadow-image: 0 18px 44px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
/* A page in its flyer's color: the page sets --tint (a dark color, services/flyerColor.js) and this class. */
.is-tinted {
  --bg: var(--tint);
  --surface: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.07);
  --card-edge: rgba(255, 255, 255, 0.1);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.8);
  --ink-3: rgba(255, 255, 255, 0.7);
  --line: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.1);
  --fill-2: rgba(255, 255, 255, 0.17);
  --on-ink: var(--tint);
  --link: #ffffff;
  --focus: #ffffff;
  --good: #ffffff;
  --good-bg: rgba(255, 255, 255, 0.13);
  --note: #ffffff;
  --note-bg: rgba(255, 255, 255, 0.13);
  --buzz-text: linear-gradient(100deg, #d9c9ff, #ffb0d4, #ffc79e);
  --shadow-image: 0 24px 60px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}