/* Hollyberry Books: watercolor storybook. Fonts are self-hosted (from Pumpkin Pie Cold Case). */
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(../fonts/atkinson-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(../fonts/atkinson-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(../fonts/caveat.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

/* ===== Tokens: shared paper + one palette per season ===== */
:root {
  --paper: #fbf4e6;
  --paper-2: #f4e9d6;
  --ink: #3a2a1e;
  --ink-soft: #6e5a48;
  --line: rgba(58, 42, 30, .14);
  --shadow: 0 10px 30px rgba(70, 45, 20, .16), 0 2px 6px rgba(70, 45, 20, .1);
  --radius: 22px;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Atkinson', system-ui, sans-serif;
  --hand: 'Caveat', cursive;
}
/* Thanksgiving: amber, cinnamon, sage, cream */
:root[data-season="fall"] {
  --accent: #c8642b;
  --accent-2: #8a3b22;
  --leaf: #6f8360;
  --glow: #e9b65c;
  --wash-1: rgba(233, 156, 82, .32);
  --wash-2: rgba(111, 131, 96, .22);
  --wash-3: rgba(200, 100, 43, .16);
}
/* Christmas: cherry, pine, snow, cream */
:root[data-season="xmas"] {
  --accent: #b8323a;
  --accent-2: #7a1d24;
  --leaf: #2f5d46;
  --glow: #f1c96a;
  --wash-1: rgba(184, 50, 58, .2);
  --wash-2: rgba(47, 93, 70, .24);
  --wash-3: rgba(241, 201, 106, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper-2);
  /* Watercolor washes + paper grain, all CSS so it loads instantly */
  background-image:
    radial-gradient(60% 40% at 12% 8%, var(--wash-1), transparent 70%),
    radial-gradient(55% 45% at 95% 30%, var(--wash-2), transparent 70%),
    radial-gradient(70% 40% at 30% 100%, var(--wash-3), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fffaf0; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--accent-2), var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-2), var(--shadow); }
.btn.ghost { background: transparent; color: var(--accent-2); box-shadow: inset 0 0 0 2px var(--accent); }
.btn.small { min-height: 42px; padding: 0 20px; font-size: .95rem; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--paper);
  box-shadow: var(--shadow); font-size: 1.2rem; line-height: 1;
}
.icon-btn:active { transform: scale(.92); }

/* Torn-paper card */
.page {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  position: relative;
}
.page::after { /* soft inner watercolor edge */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 40px var(--wash-1);
}