/* Snowfall design tokens, from the design system https://claude.ai/artifact/6iQvwLybwrNAXvEG5FP6hs
   (project/tokens.json). Dark ("Notte") is the default; light ("Neve") is opt-in with data-theme="light". */

:root {
  color-scheme: dark;
  --night: #1A2B54;
  --night-deep: #101D42;
  --night-hi: #2B4682;
  --snow: #F7FAFF;
  --snow-shade: #99ADD4;
  --knit: #DB2129;
  --knit-deep: #B81B24;
  --carrot: #FF8724;
  --coal: #2B2A2B;
  --wood: #755236;
  --bg: var(--night-deep);
  --surface: var(--night);
  --surface-raised: #22396F;
  --line: #F7FAFF24;
  --text: var(--snow);
  --text-muted: #A9B8D6;
  --action: var(--knit);
  --action-hover: var(--knit-deep);
  --on-action: #FFFFFF;
  --link: #9CC2FF;
  --highlight: var(--carrot);
  --focus: #9CC2FF;
  --shadow-card: 0 12px 32px rgba(4, 9, 26, 0.45);
  --shadow-snow: 0 3px 10px rgba(28, 44, 72, 0.22);
}

:root[data-theme="light"] {
  color-scheme: light;
  --night: #1A2B54;
  --night-deep: #101D42;
  --night-hi: #1A2B54;
  --snow: #F7FAFF;
  --snow-shade: #99ADD4;
  --knit: #DB2129;
  --knit-deep: #B81B24;
  --carrot: #FF8724;
  --coal: #2B2A2B;
  --wood: #755236;
  --bg: var(--snow);
  --surface: #FFFFFF;
  --surface-raised: #EEF3FA;
  --line: #D9E2EF;
  --text: var(--night);
  --text-muted: #56688A;
  --action: var(--knit);
  --action-hover: var(--knit-deep);
  --on-action: #FFFFFF;
  --link: #2453B8;
  --highlight: #B4520F;
  --focus: #2453B8;
  --shadow-card: 0 12px 32px rgba(26, 43, 84, 0.12);
  --shadow-snow: 0 3px 10px rgba(28, 44, 72, 0.22);
}

:root {
  --font-display: "Bagel Fat One", ui-rounded, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;
  --radius-s: 9px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --radius-icon: 22.5%;
  --page-max: 1120px;
  --text-max: 65ch;
  --logo-min: 24px;
  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
}