/* fizzy — generated from tokens.json */
:root, [data-theme="paper"] { --surface: #fffaf6; --surface-raised: #ffffff; --text: #2a1a24; --text-muted: #6b5560; --line: #8a7480; --focus: #942c42; --peach-tint: #fde1d3; --peach-tint-deep: #e9d0c3; --peach-glow: #f38084; --peach-ink: #942c42; --peach-sweep-light: #f5b487; --peach-sweep: #eb9872; --peach-sweep-deep: #c07b62; --apple-tint: #e1f3cb; --apple-tint-deep: #d0e0bb; --apple-glow: #66bc50; --apple-ink: #185826; --apple-sweep-light: #c4de84; --apple-sweep: #99c76d; --apple-sweep-deep: #759965; --pineapple-tint: #fbf0bd; --pineapple-tint-deep: #e8ddae; --pineapple-glow: #f6ba35; --pineapple-ink: #7a4a04; --pineapple-sweep-light: #f4dc7f; --pineapple-sweep: #efc55b; --pineapple-sweep-deep: #c99f4f; --grape-tint: #efe3f8; --grape-tint-deep: #dcd0e5; --grape-glow: #b98ae3; --grape-ink: #3d1561; --grape-sweep-light: #d4b3ee; --grape-sweep: #b88adf; --grape-sweep-deep: #8a67ab; --lime-tint: #d7f7de; --lime-tint-deep: #c5e3cc; --lime-glow: #34d17a; --lime-ink: #0a4a30; --lime-sweep-light: #96e6aa; --lime-sweep: #50cd80; --lime-sweep-deep: #3e9668; --pomegranate-tint: #fbdcdd; --pomegranate-tint-deep: #e8c9ca; --pomegranate-glow: #ef5b70; --pomegranate-ink: #4d0719; --pomegranate-sweep-light: #f08c94; --pomegranate-sweep: #de5668; --pomegranate-sweep-deep: #a64052; --blueberry-tint: #dde7fb; --blueberry-tint-deep: #cbd6ec; --blueberry-glow: #7a9cf0; --blueberry-ink: #101f50; --blueberry-sweep-light: #a0baf0; --blueberry-sweep: #6e91e2; --blueberry-sweep-deep: #546aaa; --lemonlime-tint: #fcf4b6; --lemonlime-tint-lime: #d6f3c0; --lemonlime-tint-deep: #dfe7ab; --lemonlime-glow: #f7d535; --lemonlime-glow-lime: #5ec84e; --lemonlime-ink: #26480f; --lemonlime-sweep-light: #f8e878; --lemonlime-sweep: #bedc60; --lemonlime-sweep-deep: #6ea050; --shadow-card: 0 2px 8px rgba(42,26,36,0.12); --shadow-can: 0 24px 40px -16px rgba(42,26,36,0.35); }
[data-theme="night"] { --surface: #1b1418; --surface-raised: #281d23; --text: #f6ecef; --text-muted: #b9a6ae; --line: #8a7480; --focus: #e9808f; }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px; --font-sans: Poppins, "Helvetica Neue", Arial, sans-serif; }
.wordmark { font-family: var(--font-sans); font-size: 120px; line-height: 0.9; font-weight: 700; letter-spacing: -0.02em; }
.flavour-name { font-family: var(--font-sans); font-size: 32px; line-height: 1.1; font-weight: 700; }
.can-tagline { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: 0.12em; }
.can-small { font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0.04em; }
.display { font-family: var(--font-sans); font-size: 56px; line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; }
.title { font-family: var(--font-sans); font-size: 28px; line-height: 1.15; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 1.4; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 500; letter-spacing: 0.04em; }
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; src: url(fonts/Poppins-Regular.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; src: url(fonts/Poppins-Medium.ttf) format("truetype"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; src: url(fonts/Poppins-Bold.ttf) format("truetype"); }