@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Upright.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --text-countdown-size: 64px;
  --text-countdown-line: 64px;
  --text-countdown-weight: 800;
  --text-countdown-style: italic;
  --text-display-size: 40px;
  --text-display-line: 44px;
  --text-display-weight: 800;
  --text-display-style: italic;
  --text-title-size: 28px;
  --text-title-line: 34px;
  --text-title-weight: 800;
  --text-heading-size: 21px;
  --text-heading-line: 28px;
  --text-heading-weight: 800;
  --text-lede-size: 19px;
  --text-lede-line: 29px;
  --text-lede-weight: 400;
  --text-body-size: 18px;
  --text-body-line: 28px;
  --text-body-weight: 400;
  --text-small-size: 15px;
  --text-small-line: 22px;
  --text-small-weight: 500;
  --text-caption-size: 13px;
  --text-caption-line: 18px;
  --text-caption-weight: 400;
  --text-tab-label-size: 13px;
  --text-tab-label-line: 16px;
  --text-tab-label-weight: 800;
  --text-tab-label-tracking: 0.08em;
  --text-button-size: 17px;
  --text-button-line: 20px;
  --text-button-weight: 800;
  --text-stat-size: 30px;
  --text-stat-line: 30px;
  --text-stat-weight: 800;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(31,27,22,0.18);
  --shadow-lift-far: 0 12px 12px rgba(31,27,22,0.28);
  --shadow-cut: 2px 2px 0 #1F1B16;
  --shadow-sticker: 2px 4px 0 #1F1B16;
  --shadow-button: 3px 4px 0 #EE8A2A;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --board: #D9C4A0;
  --board-quiet: #C9B28B;
  --paper: #FFF8E9;
  --paper-rule: #E3D4B8;
  --ink: #1F1B16;
  --ink-muted: #5C5244;
  --ink-board: #3D362C;
  --tab: #EE8A2A;
  --stamp: #17725C;
  --marker: #E5B53D;
  --tape: rgba(229,181,61,0.75);
  --on-tab: #1F1B16;
  --on-stamp: #FFF8E9;
  --on-marker: #1F1B16;
  --on-ink: #FFF8E9;
  --slab: #1F1B16;
  --on-slab: #E5B53D;
  --highlight: #E5B53D;
  --focus: #1F1B16;
  --data-1: #EE8A2A;
  --data-2: #17725C;
  --data-3: #1F1B16;
  --data-4: #E5B53D;
  --on-data-1: #1F1B16;
  --on-data-2: #FFF8E9;
  --on-data-3: #FFF8E9;
  --on-data-4: #1F1B16;
  --vote-yes: #17725C;
}

[data-theme="night"] {
  --board: #16130F;
  --board-quiet: #3B342B;
  --paper: #2A241D;
  --paper-rule: #3A3229;
  --ink: #F4EBDA;
  --ink-muted: #C4B8A3;
  --ink-board: #B5A890;
  --tab: #F29A45;
  --stamp: #4FB896;
  --marker: #E8BE4E;
  --tape: rgba(232,190,78,0.55);
  --on-tab: #1A1612;
  --on-stamp: #0F211B;
  --on-marker: #1A1612;
  --on-ink: #1A1612;
  --slab: #0B0907;
  --on-slab: #E8BE4E;
  --highlight: #6B5826;
  --focus: #F4EBDA;
  --data-1: #F29A45;
  --data-2: #4FB896;
  --data-3: #F4EBDA;
  --data-4: #E8BE4E;
  --on-data-1: #1A1612;
  --on-data-2: #0F211B;
  --on-data-3: #1A1612;
  --on-data-4: #1A1612;
  --vote-yes: #4FB896;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(0,0,0,0.55);
  --shadow-lift-far: 0 12px 14px rgba(0,0,0,0.65);
  --shadow-cut: 2px 2px 0 #0A0806;
  --shadow-sticker: 2px 4px 0 #0A0806;
  --shadow-button: 3px 4px 0 #F29A45;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
}

[data-theme="purple-pages"] {
  --board: #E4DAF0;
  --board-quiet: #CDBEE3;
  --paper: #FBF8F3;
  --paper-rule: #ECE5F5;
  --ink: #241634;
  --ink-muted: #5E5470;
  --ink-board: #4A3F5C;
  --tab: #C8E23C;
  --stamp: #6B3FA0;
  --marker: #CDBEE3;
  --tape: rgba(205,190,227,0.75);
  --on-tab: #241634;
  --on-stamp: #FBF8F3;
  --on-marker: #241634;
  --on-ink: #FBF8F3;
  --slab: #241634;
  --on-slab: #CDBEE3;
  --highlight: #CDBEE3;
  --focus: #241634;
  --data-1: #C8E23C;
  --data-2: #6B3FA0;
  --data-3: #241634;
  --data-4: #CDBEE3;
  --on-data-1: #241634;
  --on-data-2: #FBF8F3;
  --on-data-3: #FBF8F3;
  --on-data-4: #241634;
  --vote-yes: #6B3FA0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(31,27,22,0.18);
  --shadow-lift-far: 0 12px 12px rgba(31,27,22,0.28);
  --shadow-cut: 2px 2px 0 #241634;
  --shadow-sticker: 2px 4px 0 #241634;
  --shadow-button: 3px 4px 0 #C8E23C;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
}

[data-theme="newsprint"] {
  --board: #E4E0D6;
  --board-quiet: #CFCAC0;
  --paper: #FFFDF8;
  --paper-rule: #E6E1D6;
  --ink: #1A1A1A;
  --ink-muted: #55524C;
  --ink-board: #3A3833;
  --tab: #F2D02B;
  --stamp: #5B3E8F;
  --marker: #F4A7C6;
  --tape: rgba(244,167,198,0.75);
  --on-tab: #1A1A1A;
  --on-stamp: #FFFDF8;
  --on-marker: #1A1A1A;
  --on-ink: #FFFDF8;
  --slab: #1A1A1A;
  --on-slab: #F4A7C6;
  --highlight: #F4A7C6;
  --focus: #1A1A1A;
  --data-1: #F2D02B;
  --data-2: #5B3E8F;
  --data-3: #1A1A1A;
  --data-4: #F4A7C6;
  --on-data-1: #1A1A1A;
  --on-data-2: #FFFDF8;
  --on-data-3: #FFFDF8;
  --on-data-4: #1A1A1A;
  --vote-yes: #5B3E8F;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(31,27,22,0.18);
  --shadow-lift-far: 0 12px 12px rgba(31,27,22,0.28);
  --shadow-cut: 2px 2px 0 #1A1A1A;
  --shadow-sticker: 2px 4px 0 #1A1A1A;
  --shadow-button: 3px 4px 0 #F2D02B;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
}

[data-theme="garden"] {
  --board: #C9D2B8;
  --board-quiet: #B3BDA1;
  --paper: #FBFAF2;
  --paper-rule: #E2E5D4;
  --ink: #1D2117;
  --ink-muted: #4F5645;
  --ink-board: #3A4032;
  --tab: #F2A93B;
  --stamp: #2F5D3A;
  --marker: #C9B6E4;
  --tape: rgba(201,182,228,0.75);
  --on-tab: #1D2117;
  --on-stamp: #FBFAF2;
  --on-marker: #1D2117;
  --on-ink: #FBFAF2;
  --slab: #1D2117;
  --on-slab: #C9B6E4;
  --highlight: #C9B6E4;
  --focus: #1D2117;
  --data-1: #F2A93B;
  --data-2: #2F5D3A;
  --data-3: #1D2117;
  --data-4: #C9B6E4;
  --on-data-1: #1D2117;
  --on-data-2: #FBFAF2;
  --on-data-3: #FBFAF2;
  --on-data-4: #1D2117;
  --vote-yes: #2F5D3A;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(31,27,22,0.18);
  --shadow-lift-far: 0 12px 12px rgba(31,27,22,0.28);
  --shadow-cut: 2px 2px 0 #1D2117;
  --shadow-sticker: 2px 4px 0 #1D2117;
  --shadow-button: 3px 4px 0 #F2A93B;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
}

[data-theme="peach-pine"] {
  --board: #F1D6C2;
  --board-quiet: #E0C2AC;
  --paper: #FFFAF5;
  --paper-rule: #F0E1D6;
  --ink: #24201C;
  --ink-muted: #5E5148;
  --ink-board: #4A3E35;
  --tab: #8FD5B0;
  --stamp: #1F4D3F;
  --marker: #F6DE7A;
  --tape: rgba(246,222,122,0.75);
  --on-tab: #24201C;
  --on-stamp: #FFFAF5;
  --on-marker: #24201C;
  --on-ink: #FFFAF5;
  --slab: #24201C;
  --on-slab: #F6DE7A;
  --highlight: #F6DE7A;
  --focus: #24201C;
  --data-1: #8FD5B0;
  --data-2: #1F4D3F;
  --data-3: #24201C;
  --data-4: #F6DE7A;
  --on-data-1: #24201C;
  --on-data-2: #FFFAF5;
  --on-data-3: #FFFAF5;
  --on-data-4: #24201C;
  --vote-yes: #1F4D3F;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 40px;
  --radius-none: 0px;
  --radius-chip: 6px;
  --radius-round: 999px;
  --shadow-lift-near: 0 2px 0 rgba(31,27,22,0.18);
  --shadow-lift-far: 0 12px 12px rgba(31,27,22,0.28);
  --shadow-cut: 2px 2px 0 #24201C;
  --shadow-sticker: 2px 4px 0 #24201C;
  --shadow-button: 3px 4px 0 #8FD5B0;
  --tilt-tab: -2deg;
  --tilt-paper: 0.8deg;
  --tilt-sticker: -4deg;
  --tilt-tape: -4deg;
  --dur-rise: 600ms;
  --dur-grow: 1000ms;
  --dur-pop: 500ms;
  --dur-count: 1200ms;
  --dur-stagger: 120ms;
  --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bp-tablet: 600px;
  --bp-desktop: 1280px;
  --topbar-height: 76px;
  --rail-width: 104px;
  --sidenav-width: 256px;
  --list-pane-width: 380px;
  --aside-width: 336px;
  --content-max: 880px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --board: #16130F;
    --board-quiet: #3B342B;
    --paper: #2A241D;
    --paper-rule: #3A3229;
    --ink: #F4EBDA;
    --ink-muted: #C4B8A3;
    --ink-board: #B5A890;
    --tab: #F29A45;
    --stamp: #4FB896;
    --marker: #E8BE4E;
    --tape: rgba(232,190,78,0.55);
    --on-tab: #1A1612;
    --on-stamp: #0F211B;
    --on-marker: #1A1612;
    --on-ink: #1A1612;
    --slab: #0B0907;
    --on-slab: #E8BE4E;
    --highlight: #6B5826;
    --focus: #F4EBDA;
    --data-1: #F29A45;
    --data-2: #4FB896;
    --data-3: #F4EBDA;
    --data-4: #E8BE4E;
    --on-data-1: #1A1612;
    --on-data-2: #0F211B;
    --on-data-3: #1A1612;
    --on-data-4: #1A1612;
    --vote-yes: #4FB896;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 40px;
    --radius-none: 0px;
    --radius-chip: 6px;
    --radius-round: 999px;
    --shadow-lift-near: 0 2px 0 rgba(0,0,0,0.55);
    --shadow-lift-far: 0 12px 14px rgba(0,0,0,0.65);
    --shadow-cut: 2px 2px 0 #0A0806;
    --shadow-sticker: 2px 4px 0 #0A0806;
    --shadow-button: 3px 4px 0 #F29A45;
    --tilt-tab: -2deg;
    --tilt-paper: 0.8deg;
    --tilt-sticker: -4deg;
    --tilt-tape: -4deg;
    --dur-rise: 600ms;
    --dur-grow: 1000ms;
    --dur-pop: 500ms;
    --dur-count: 1200ms;
    --dur-stagger: 120ms;
    --ease-paper: cubic-bezier(0.2, 0.8, 0.2, 1);
    --bp-tablet: 600px;
    --bp-desktop: 1280px;
    --topbar-height: 76px;
    --rail-width: 104px;
    --sidenav-width: 256px;
    --list-pane-width: 380px;
    --aside-width: 336px;
    --content-max: 880px;
    --gutter-tablet: 24px;
    --gutter-desktop: 32px;
  }
}