:root {
  --cream: #fcf7ea;
  --paper: #fdf9ee;
  --meadow: #b6dcb8;
  --forest-1: #2f5a3d;
  --forest-2: #4a8e5e;
  --forest-3: #7fb88a;
  --logo-blue: #6cc2dc;
  --navy: #1f3a5f;
  --ink: #1c2a22;
  --ink-soft: rgba(28, 42, 34, 0.7);
}
[data-time="night"] {
  --cream: #0e1631;
  --paper: #1a2340;
  --ink: #ecf1f7;
  --ink-soft: rgba(236, 241, 247, 0.72);
  --navy: #f0e8c8;
  --forest-1: #7fc890;
  --forest-2: #a4d8b0;
  --forest-3: #c8e8d0;
  --logo-blue: #88c8e0;
  --meadow: #283c2e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cream); color: var(--ink); transition: color 0.6s ease; }
body {
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 500;
  font-size: 17px; line-height: 1.7;
}
h1, h2, h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; color: var(--forest-1); }
main { max-width: 760px; margin: 0 auto; padding: 160px 32px 120px; }
.eyebrow { font-family: 'Fredoka'; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--forest-2) 50%, var(--forest-1)); margin-bottom: 18px; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin-bottom: 32px; }
h2 { font-size: 22px; margin-top: 40px; margin-bottom: 14px; }
p, li { color: var(--ink-soft); margin-bottom: 14px; }
ul { padding-left: 22px; }
.updated { color: var(--ink-soft); font-size: 14px; margin-bottom: 40px; font-style: italic; }
.note { background: var(--paper); border: 2px dashed rgba(45, 90, 61, 0.2); padding: 22px 26px; border-radius: 18px; margin-top: 40px; color: var(--ink); font-size: 15px; }
.note strong { color: var(--forest-1); }
.mail-link { color: color-mix(in srgb, var(--forest-2) 50%, var(--forest-1)); }
code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--meadow); color: var(--ink); }
#cookies { scroll-margin-top: 120px; }
.cookie-prefs-btn {
  padding: 10px 20px; border: 2px solid var(--forest-1); border-radius: 999px;
  background: transparent; color: var(--forest-1);
  font: 600 15px/1.2 'Fredoka', system-ui, sans-serif;
  transition: background-color 0.15s, color 0.15s;
}
.cookie-prefs-btn:hover { background: var(--forest-1); color: var(--paper); }
.cookie-prefs-btn:focus-visible { outline: 3px solid var(--logo-blue); outline-offset: 2px; }
ol { padding-left: 22px; }
strong { color: var(--ink); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 8px 0 22px; border-radius: 18px; border: 2px solid rgba(45, 90, 61, 0.15); background: var(--paper); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; }
th { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; color: var(--forest-1); background: var(--meadow); }
td { color: var(--ink-soft); border-top: 1px solid rgba(45, 90, 61, 0.12); }
td:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  main { padding: 130px 24px 90px; }
}