/* Advent App Brand: design tokens. Candlelight (light) is the default; Advent Night applies with data-theme="dark" or the system dark setting. */
:root {
  --surface: #FBF4EA;
  --surface-2: #F3E6D3;
  --ink: #2E1F2B;
  --ink-muted: #6B5563;
  --hairline: #E2D2BE;
  --scarlet: #D9402B;
  --scarlet-deep: #B3321F;
  --marigold: #F0A33A;
  --fuchsia: #C23A6E;
  --blush: #F3C4B8;
  --teal: #1E7470;
  --sage: #8CA57C;
  --night: #25244F;
  --candle: #F2C14E;
  --tabby: #C99A6B;
  --on-accent: #FFF8EE;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(46,31,43,0.10);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
}
[data-theme="dark"] {
  --surface: #1D1B38;
  --surface-2: #28264B;
  --ink: #F7EEE2;
  --ink-muted: #C9BCCB;
  --hairline: #3A3760;
  --scarlet: #EE6A50;
  --scarlet-deep: #F4937D;
  --marigold: #F4B458;
  --fuchsia: #E0679A;
  --blush: #5A3346;
  --teal: #4FB3A9;
  --sage: #7C9A6E;
  --night: #0F0E24;
  --candle: #F2C14E;
  --tabby: #B98A5C;
  --on-accent: #1D1B38;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1D1B38;
    --surface-2: #28264B;
    --ink: #F7EEE2;
    --ink-muted: #C9BCCB;
    --hairline: #3A3760;
    --scarlet: #EE6A50;
    --scarlet-deep: #F4937D;
    --marigold: #F4B458;
    --fuchsia: #E0679A;
    --blush: #5A3346;
    --teal: #4FB3A9;
    --sage: #7C9A6E;
    --night: #0F0E24;
    --candle: #F2C14E;
    --tabby: #B98A5C;
    --on-accent: #1D1B38;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  }
}
.display-xl { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -0.01em; }
.display-md { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 500; }
.scripture { font-family: var(--font-display); font-size: 20px; line-height: 32px; font-weight: 400; font-style: italic; }
.title { font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; }
.note { font-family: var(--font-hand); font-size: 24px; line-height: 28px; font-weight: 500; }
body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); }