/* GENERATED by design/generate.py from design/tokens.json - do not edit by hand. */
/* Hex, not oklch(): the board runs on Chromium 68. Same values as colors.xml. */

:root {
  --bg: #F0EBDC;
  --surface: #F6F2E8;
  --surface2: #E5DFD0;
  --today-bg: #CEE2D8;
  --disc: #F6F2E8;
  --disc-edge: #D7D1BF;
  --c-act: #246099;
  --c-food: #BA882E;
  --c-todo: #3B723E;
  --check-ink: #F8F5EC;
  --on-food: #1C2A26;
  --heading: #16524F;
  --photo: #B6C6BF;
  --ink-ground: #1C2A26;
  --ink-soft-ground: #475A54;
  --ink-card: #1C2A26;
  --ink-soft-card: #475A54;
  --selected: #6D3B58;
  --on-selected: #F8F5EC;
  --selected-card: #6D3B58;
  --on-selected-card: #F8F5EC;
  --brand-ink: #16524F;
  --track: #CFCABC;
  --qr-tile-bg: #F7FBF8;
  --qr-caption-ink: #1A2721;
  --danger: #AC3031;
  --on-danger: #F8F5EC;
  --track-card: #C3BDB0;
  --member-blue: #246099;
  --member-gold: #BA882E;
  --member-green: #3B723E;
  --member-sage: #618658;
  --member-teal: #1E5F5C;
  --member-plum: #6D3B58;
  --site-bullet: #738F6D;
  --site-meta-ink: #354742;
  --accent: #1E5F5C;
  --accent-ink-ground: #1E5F5C;
  --accent-ink-card: #1E5F5C;
  --on-accent: #F8F5EC;
  --accent-card: #1E5F5C;
  --on-accent-card: #F8F5EC;
  --font-display: 'Familjen Grotesk', sans-serif;
  --font-body: Karla, sans-serif;
  --font-brand: Fraunces, serif;
  --font-scale: 1;
  --board-padding: 96px;
  --fs-board-padding: calc(96px * var(--font-scale));
  --today-border: 4px;
  --fs-today-border: calc(4px * var(--font-scale));
  --switcher-gap: 10px;
  --fs-switcher-gap: calc(10px * var(--font-scale));
  --switcher-pad: 8px;
  --fs-switcher-pad: calc(8px * var(--font-scale));
  --switcher-radius: 8px;
  --fs-switcher-radius: calc(8px * var(--font-scale));
  --switch-item-text: 34px;
  --fs-switch-item-text: calc(34px * var(--font-scale));
  --switch-item-pad-v: 12px;
  --fs-switch-item-pad-v: calc(12px * var(--font-scale));
  --switch-item-pad-h: 30px;
  --fs-switch-item-pad-h: calc(30px * var(--font-scale));
  --switch-item-radius: 5px;
  --fs-switch-item-radius: calc(5px * var(--font-scale));
  --filter-gap: 14px;
  --fs-filter-gap: calc(14px * var(--font-scale));
  --filter-text: 30px;
  --fs-filter-text: calc(30px * var(--font-scale));
  --filter-pad-v: 12px;
  --fs-filter-pad-v: calc(12px * var(--font-scale));
  --filter-pad-h-plain: 28px;
  --fs-filter-pad-h-plain: calc(28px * var(--font-scale));
  --filter-pad-h-dot: 26px;
  --fs-filter-pad-h-dot: calc(26px * var(--font-scale));
  --filter-radius: 6px;
  --fs-filter-radius: calc(6px * var(--font-scale));
  --filter-dot: 16px;
  --fs-filter-dot: calc(16px * var(--font-scale));
  --filter-dot-gap: 12px;
  --fs-filter-dot-gap: calc(12px * var(--font-scale));
  --filter-text-focus: 32px;
  --fs-filter-text-focus: calc(32px * var(--font-scale));
  --filter-pad-v-focus: 14px;
  --fs-filter-pad-v-focus: calc(14px * var(--font-scale));
  --filter-pad-h-focus: 30px;
  --fs-filter-pad-h-focus: calc(30px * var(--font-scale));
  --month-title: 108px;
  --fs-month-title: calc(108px * var(--font-scale));
  --month-subtitle: 32px;
  --fs-month-subtitle: calc(32px * var(--font-scale));
  --month-header-gap: 22px;
  --fs-month-header-gap: calc(22px * var(--font-scale));
  --month-dow-text: 26px;
  --fs-month-dow-text: calc(26px * var(--font-scale));
  --month-grid-gap: 8px;
  --fs-month-grid-gap: calc(8px * var(--font-scale));
  --month-cell-gap: 6px;
  --fs-month-cell-gap: calc(6px * var(--font-scale));
  --month-cell-pad-v: 10px;
  --fs-month-cell-pad-v: calc(10px * var(--font-scale));
  --month-cell-pad-h: 12px;
  --fs-month-cell-pad-h: calc(12px * var(--font-scale));
  --month-cell-radius: 6px;
  --fs-month-cell-radius: calc(6px * var(--font-scale));
  --month-num: 34px;
  --fs-month-num: calc(34px * var(--font-scale));
  --month-num-today: 38px;
  --fs-month-num-today: calc(38px * var(--font-scale));
  --month-more-text: 24px;
  --fs-month-more-text: calc(24px * var(--font-scale));
  --month-item-row-h: 26px;
  --fs-month-item-row-h: calc(26px * var(--font-scale));
  --month-item-gap: 10px;
  --fs-month-item-gap: calc(10px * var(--font-scale));
  --month-item-text: 25px;
  --fs-month-item-text: calc(25px * var(--font-scale));
  --month-bar-w: 7px;
  --fs-month-bar-w: calc(7px * var(--font-scale));
  --month-bar-h: 22px;
  --fs-month-bar-h: calc(22px * var(--font-scale));
  --month-bar-radius: 4px;
  --fs-month-bar-radius: calc(4px * var(--font-scale));
  --month-dot: 18px;
  --fs-month-dot: calc(18px * var(--font-scale));
  --week-title: 112px;
  --fs-week-title: calc(112px * var(--font-scale));
  --week-subtitle: 32px;
  --fs-week-subtitle: calc(32px * var(--font-scale));
  --week-header-gap: 30px;
  --fs-week-header-gap: calc(30px * var(--font-scale));
  --week-col-gap: 10px;
  --fs-week-col-gap: calc(10px * var(--font-scale));
  --week-col-radius: 8px;
  --fs-week-col-radius: calc(8px * var(--font-scale));
  --week-col-pad-v: 20px;
  --fs-week-col-pad-v: calc(20px * var(--font-scale));
  --week-col-pad-h: 16px;
  --fs-week-col-pad-h: calc(16px * var(--font-scale));
  --week-col-inner-gap: 12px;
  --fs-week-col-inner-gap: calc(12px * var(--font-scale));
  --week-dow: 30px;
  --fs-week-dow: calc(30px * var(--font-scale));
  --week-daynum: 56px;
  --fs-week-daynum: calc(56px * var(--font-scale));
  --week-item-bar: 7px;
  --fs-week-item-bar: calc(7px * var(--font-scale));
  --week-item-pad-l: 14px;
  --fs-week-item-pad-l: calc(14px * var(--font-scale));
  --week-item-time: 24px;
  --fs-week-item-time: calc(24px * var(--font-scale));
  --week-item-title: 28px;
  --fs-week-item-title: calc(28px * var(--font-scale));
  --day-numeral: 210px;
  --fs-day-numeral: calc(210px * var(--font-scale));
  --day-weekday: 64px;
  --fs-day-weekday: calc(64px * var(--font-scale));
  --day-subtitle: 32px;
  --fs-day-subtitle: calc(32px * var(--font-scale));
  --day-header-gap: 30px;
  --fs-day-header-gap: calc(30px * var(--font-scale));
  --day-col-gap: 36px;
  --fs-day-col-gap: calc(36px * var(--font-scale));
  --day-card-gap: 18px;
  --fs-day-card-gap: calc(18px * var(--font-scale));
  --day-card-radius: 8px;
  --fs-day-card-radius: calc(8px * var(--font-scale));
  --day-card-pad-v: 26px;
  --fs-day-card-pad-v: calc(26px * var(--font-scale));
  --day-card-pad-h: 30px;
  --fs-day-card-pad-h: calc(30px * var(--font-scale));
  --day-card-bar: 12px;
  --fs-day-card-bar: calc(12px * var(--font-scale));
  --day-card-inner-gap: 26px;
  --fs-day-card-inner-gap: calc(26px * var(--font-scale));
  --day-time: 40px;
  --fs-day-time: calc(40px * var(--font-scale));
  --day-time-w: 168px;
  --fs-day-time-w: calc(168px * var(--font-scale));
  --day-title: 42px;
  --fs-day-title: calc(42px * var(--font-scale));
  --day-notes: 28px;
  --fs-day-notes: calc(28px * var(--font-scale));
  --todo-panel-pad-v: 30px;
  --fs-todo-panel-pad-v: calc(30px * var(--font-scale));
  --todo-panel-pad-h: 32px;
  --fs-todo-panel-pad-h: calc(32px * var(--font-scale));
  --todo-panel-gap: 18px;
  --fs-todo-panel-gap: calc(18px * var(--font-scale));
  --todo-header-text: 42px;
  --fs-todo-header-text: calc(42px * var(--font-scale));
  --todo-header-dot: 18px;
  --fs-todo-header-dot: calc(18px * var(--font-scale));
  --todo-row-pad-v: 20px;
  --fs-todo-row-pad-v: calc(20px * var(--font-scale));
  --todo-row-pad-h: 22px;
  --fs-todo-row-pad-h: calc(22px * var(--font-scale));
  --todo-row-radius: 6px;
  --fs-todo-row-radius: calc(6px * var(--font-scale));
  --todo-row-gap: 22px;
  --fs-todo-row-gap: calc(22px * var(--font-scale));
  --todo-box: 52px;
  --fs-todo-box: calc(52px * var(--font-scale));
  --todo-box-radius: 5px;
  --fs-todo-box-radius: calc(5px * var(--font-scale));
  --todo-box-border: 5px;
  --fs-todo-box-border: calc(5px * var(--font-scale));
  --todo-check-text: 38px;
  --fs-todo-check-text: calc(38px * var(--font-scale));
  --todo-label: 34px;
  --fs-todo-label: calc(34px * var(--font-scale));
  --todo-row-pad-v-focus: 24px;
  --fs-todo-row-pad-v-focus: calc(24px * var(--font-scale));
  --todo-row-pad-h-focus: 26px;
  --fs-todo-row-pad-h-focus: calc(26px * var(--font-scale));
  --todo-box-focus: 56px;
  --fs-todo-box-focus: calc(56px * var(--font-scale));
  --todo-label-focus: 38px;
  --fs-todo-label-focus: calc(38px * var(--font-scale));
  --todo-hint: 26px;
  --fs-todo-hint: calc(26px * var(--font-scale));
  --cook-gap: 30px;
  --fs-cook-gap: calc(30px * var(--font-scale));
  --cook-title: 92px;
  --fs-cook-title: calc(92px * var(--font-scale));
  --cook-meta-gap: 16px;
  --fs-cook-meta-gap: calc(16px * var(--font-scale));
  --cook-meta-text: 32px;
  --fs-cook-meta-text: calc(32px * var(--font-scale));
  --cook-meta-item-gap: 36px;
  --fs-cook-meta-item-gap: calc(36px * var(--font-scale));
  --cook-button-gap: 18px;
  --fs-cook-button-gap: calc(18px * var(--font-scale));
  --cook-button-text: 32px;
  --fs-cook-button-text: calc(32px * var(--font-scale));
  --cook-button-text-focus: 34px;
  --fs-cook-button-text-focus: calc(34px * var(--font-scale));
  --cook-button-pad-v: 16px;
  --fs-cook-button-pad-v: calc(16px * var(--font-scale));
  --cook-button-pad-h: 34px;
  --fs-cook-button-pad-h: calc(34px * var(--font-scale));
  --cook-body-gap: 72px;
  --fs-cook-body-gap: calc(72px * var(--font-scale));
  --cook-section-head: 42px;
  --fs-cook-section-head: calc(42px * var(--font-scale));
  --cook-section-dot: 18px;
  --fs-cook-section-dot: calc(18px * var(--font-scale));
  --cook-ing-row-gap: 9px;
  --fs-cook-ing-row-gap: calc(9px * var(--font-scale));
  --cook-ing-qty: 31px;
  --fs-cook-ing-qty: calc(31px * var(--font-scale));
  --cook-ing-qty-w: 118px;
  --fs-cook-ing-qty-w: calc(118px * var(--font-scale));
  --cook-ing-text: 31px;
  --fs-cook-ing-text: calc(31px * var(--font-scale));
  --cook-step-row-gap: 11px;
  --fs-cook-step-row-gap: calc(11px * var(--font-scale));
  --cook-step-num: 36px;
  --fs-cook-step-num: calc(36px * var(--font-scale));
  --cook-step-num-w: 50px;
  --fs-cook-step-num-w: calc(50px * var(--font-scale));
  --cook-step-text: 30px;
  --fs-cook-step-text: calc(30px * var(--font-scale));
  --cook-card-radius: 8px;
  --fs-cook-card-radius: calc(8px * var(--font-scale));
  --cook-row-radius: 6px;
  --fs-cook-row-radius: calc(6px * var(--font-scale));
  --step-gap: 32px;
  --fs-step-gap: calc(32px * var(--font-scale));
  --step-head-title: 44px;
  --fs-step-head-title: calc(44px * var(--font-scale));
  --step-head-count: 56px;
  --fs-step-head-count: calc(56px * var(--font-scale));
  --step-progress-h: 14px;
  --fs-step-progress-h: calc(14px * var(--font-scale));
  --step-progress-radius: 7px;
  --fs-step-progress-radius: calc(7px * var(--font-scale));
  --step-progress-gap: 10px;
  --fs-step-progress-gap: calc(10px * var(--font-scale));
  --step-main-gap: 64px;
  --fs-step-main-gap: calc(64px * var(--font-scale));
  --step-numeral: 320px;
  --fs-step-numeral: calc(320px * var(--font-scale));
  --step-text: 92px;
  --fs-step-text: calc(92px * var(--font-scale));
  --step-bottom-gap: 20px;
  --fs-step-bottom-gap: calc(20px * var(--font-scale));
  --step-next-pad-v: 22px;
  --fs-step-next-pad-v: calc(22px * var(--font-scale));
  --step-next-pad-h: 30px;
  --fs-step-next-pad-h: calc(30px * var(--font-scale));
  --step-next-label: 34px;
  --fs-step-next-label: calc(34px * var(--font-scale));
  --step-next-text: 34px;
  --fs-step-next-text: calc(34px * var(--font-scale));
  --step-button-text: 34px;
  --fs-step-button-text: calc(34px * var(--font-scale));
  --step-button-text-focus: 36px;
  --fs-step-button-text-focus: calc(36px * var(--font-scale));
  --step-ing-gap: 40px;
  --fs-step-ing-gap: calc(40px * var(--font-scale));
  --step-ing-label-gap: 14px;
  --fs-step-ing-label-gap: calc(14px * var(--font-scale));
  --step-ing-label-h: 48px;
  --fs-step-ing-label-h: calc(48px * var(--font-scale));
  --step-ing-label-text: 36px;
  --fs-step-ing-label-text: calc(36px * var(--font-scale));
  --step-ing-text: 40px;
  --fs-step-ing-text: calc(40px * var(--font-scale));
  --step-ing-row-gap: 12px;
  --fs-step-ing-row-gap: calc(12px * var(--font-scale));
  --step-ing-col-gap: 44px;
  --fs-step-ing-col-gap: calc(44px * var(--font-scale));
  --step-ing-item-gap: 12px;
  --fs-step-ing-item-gap: calc(12px * var(--font-scale));
  --check-title: 96px;
  --fs-check-title: calc(96px * var(--font-scale));
  --check-sub: 32px;
  --fs-check-sub: calc(32px * var(--font-scale));
  --check-count: 52px;
  --fs-check-count: calc(52px * var(--font-scale));
  --check-row-gap: 16px;
  --fs-check-row-gap: calc(16px * var(--font-scale));
  --check-col-gap: 28px;
  --fs-check-col-gap: calc(28px * var(--font-scale));
  --check-row-pad-v: 18px;
  --fs-check-row-pad-v: calc(18px * var(--font-scale));
  --check-row-pad-h: 24px;
  --fs-check-row-pad-h: calc(24px * var(--font-scale));
  --check-row-inner-gap: 24px;
  --fs-check-row-inner-gap: calc(24px * var(--font-scale));
  --check-qty: 34px;
  --fs-check-qty: calc(34px * var(--font-scale));
  --check-qty-w: 130px;
  --fs-check-qty-w: calc(130px * var(--font-scale));
  --check-item: 34px;
  --fs-check-item: calc(34px * var(--font-scale));
  --check-item-focus: 36px;
  --fs-check-item-focus: calc(36px * var(--font-scale));
  --unread-kicker: 30px;
  --fs-unread-kicker: calc(30px * var(--font-scale));
  --unread-name: 48px;
  --fs-unread-name: calc(48px * var(--font-scale));
  --unread-row-gap: 96px;
  --fs-unread-row-gap: calc(96px * var(--font-scale));
  --unread-max-w: 1040px;
  --fs-unread-max-w: calc(1040px * var(--font-scale));
  --unread-head: 104px;
  --fs-unread-head: calc(104px * var(--font-scale));
  --unread-body: 40px;
  --fs-unread-body: calc(40px * var(--font-scale));
  --unread-url: 28px;
  --fs-unread-url: calc(28px * var(--font-scale));
  --qr-tile-radius: 8px;
  --fs-qr-tile-radius: calc(8px * var(--font-scale));
  --qr-tile-pad: 32px;
  --fs-qr-tile-pad: calc(32px * var(--font-scale));
  --qr-tile-pad-bottom: 28px;
  --fs-qr-tile-pad-bottom: calc(28px * var(--font-scale));
  --qr-size: 400px;
  --fs-qr-size: calc(400px * var(--font-scale));
  --qr-caption: 30px;
  --fs-qr-caption: calc(30px * var(--font-scale));
  --lib-category-gap: 36px;
  --fs-lib-category-gap: calc(36px * var(--font-scale));
  --lib-chip-gap: 14px;
  --fs-lib-chip-gap: calc(14px * var(--font-scale));
  --lib-chip-pad-v: 10px;
  --fs-lib-chip-pad-v: calc(10px * var(--font-scale));
  --lib-chip-pad-h: 24px;
  --fs-lib-chip-pad-h: calc(24px * var(--font-scale));
  --lib-chip-radius: 6px;
  --fs-lib-chip-radius: calc(6px * var(--font-scale));
  --lib-chip-border: 4px;
  --fs-lib-chip-border: calc(4px * var(--font-scale));
  --lib-chip-text: 30px;
  --fs-lib-chip-text: calc(30px * var(--font-scale));
  --lib-chip-text-focus: 32px;
  --fs-lib-chip-text-focus: calc(32px * var(--font-scale));
  --lib-card-photo-h: 260px;
  --fs-lib-card-photo-h: calc(260px * var(--font-scale));
  --brand-disc: 52px;
  --fs-brand-disc: calc(52px * var(--font-scale));
  --brand-disc-border: 2px;
  --fs-brand-disc-border: calc(2px * var(--font-scale));
  --brand-gap: 16px;
  --fs-brand-gap: calc(16px * var(--font-scale));
  --brand-margin-bottom: 20px;
  --fs-brand-margin-bottom: calc(20px * var(--font-scale));
  --brand-wordmark-text: 36px;
  --fs-brand-wordmark-text: calc(36px * var(--font-scale));
  --home-disc: 92px;
  --fs-home-disc: calc(92px * var(--font-scale));
  --home-disc-border: 3px;
  --fs-home-disc-border: calc(3px * var(--font-scale));
  --home-disc-gap: 24px;
  --fs-home-disc-gap: calc(24px * var(--font-scale));
  --home-wordmark-text: 64px;
  --fs-home-wordmark-text: calc(64px * var(--font-scale));
  --home-header-gap: 40px;
  --fs-home-header-gap: calc(40px * var(--font-scale));
  --home-header-row-gap: 36px;
  --fs-home-header-row-gap: calc(36px * var(--font-scale));
  --home-date-gap: 12px;
  --fs-home-date-gap: calc(12px * var(--font-scale));
  --home-date-text: 38px;
  --fs-home-date-text: calc(38px * var(--font-scale));
  --home-date-num-text: 44px;
  --fs-home-date-num-text: calc(44px * var(--font-scale));
  --home-body-gap: 44px;
  --fs-home-body-gap: calc(44px * var(--font-scale));
  --home-rail-w: 300px;
  --fs-home-rail-w: calc(300px * var(--font-scale));
  --home-rail-gap: 12px;
  --fs-home-rail-gap: calc(12px * var(--font-scale));
  --home-rail-icon: 36px;
  --fs-home-rail-icon: calc(36px * var(--font-scale));
  --home-rail-item-gap: 18px;
  --fs-home-rail-item-gap: calc(18px * var(--font-scale));
  --home-menu-pad-v: 16px;
  --fs-home-menu-pad-v: calc(16px * var(--font-scale));
  --home-menu-pad-h: 22px;
  --fs-home-menu-pad-h: calc(22px * var(--font-scale));
  --home-menu-radius: 6px;
  --fs-home-menu-radius: calc(6px * var(--font-scale));
  --home-menu-text: 32px;
  --fs-home-menu-text: calc(32px * var(--font-scale));
  --home-card-gap: 28px;
  --fs-home-card-gap: calc(28px * var(--font-scale));
  --home-card-radius: 8px;
  --fs-home-card-radius: calc(8px * var(--font-scale));
  --home-card-inner-gap: 16px;
  --fs-home-card-inner-gap: calc(16px * var(--font-scale));
  --home-card-pad-v: 26px;
  --fs-home-card-pad-v: calc(26px * var(--font-scale));
  --home-card-pad-h: 32px;
  --fs-home-card-pad-h: calc(32px * var(--font-scale));
  --home-card-title: 44px;
  --fs-home-card-title: calc(44px * var(--font-scale));
  --home-bar-w: 7px;
  --fs-home-bar-w: calc(7px * var(--font-scale));
  --home-plate-item-gap: 10px;
  --fs-home-plate-item-gap: calc(10px * var(--font-scale));
  --home-plate-item-min-h: 46px;
  --fs-home-plate-item-min-h: calc(46px * var(--font-scale));
  --home-plate-item-row-gap: 20px;
  --fs-home-plate-item-row-gap: calc(20px * var(--font-scale));
  --home-plate-bar-h: 32px;
  --fs-home-plate-bar-h: calc(32px * var(--font-scale));
  --home-plate-time-w: 110px;
  --fs-home-plate-time-w: calc(110px * var(--font-scale));
  --home-plate-time-text: 34px;
  --fs-home-plate-time-text: calc(34px * var(--font-scale));
  --home-plate-todo-w: 137px;
  --fs-home-plate-todo-w: calc(137px * var(--font-scale));
  --home-plate-todo-box: 40px;
  --fs-home-plate-todo-box: calc(40px * var(--font-scale));
  --home-plate-todo-border: 4px;
  --fs-home-plate-todo-border: calc(4px * var(--font-scale));
  --home-plate-todo-radius: 5px;
  --fs-home-plate-todo-radius: calc(5px * var(--font-scale));
  --home-plate-item-text: 34px;
  --fs-home-plate-item-text: calc(34px * var(--font-scale));
  --home-plate-empty-title: 40px;
  --fs-home-plate-empty-title: calc(40px * var(--font-scale));
  --home-plate-empty-sub: 30px;
  --fs-home-plate-empty-sub: calc(30px * var(--font-scale));
  --home-photo-placeholder-text: 30px;
  --fs-home-photo-placeholder-text: calc(30px * var(--font-scale));
  --home-photo-empty-pad: 30px;
  --fs-home-photo-empty-pad: calc(30px * var(--font-scale));
  --home-photo-empty-text: 36px;
  --fs-home-photo-empty-text: calc(36px * var(--font-scale));
  --home-week-col-gap: 36px;
  --fs-home-week-col-gap: calc(36px * var(--font-scale));
  --home-week-row-gap: 16px;
  --fs-home-week-row-gap: calc(16px * var(--font-scale));
  --home-week-bar-h: 28px;
  --fs-home-week-bar-h: calc(28px * var(--font-scale));
  --home-week-day-w: 62px;
  --fs-home-week-day-w: calc(62px * var(--font-scale));
  --home-week-day-text: 28px;
  --fs-home-week-day-text: calc(28px * var(--font-scale));
  --home-week-item-text: 32px;
  --fs-home-week-item-text: calc(32px * var(--font-scale));
  --home-meal-gap: 6px;
  --fs-home-meal-gap: calc(6px * var(--font-scale));
  --home-meal-photo-text: 26px;
  --fs-home-meal-photo-text: calc(26px * var(--font-scale));
  --home-meal-title-full: 34px;
  --fs-home-meal-title-full: calc(34px * var(--font-scale));
  --home-meal-title-nophoto: 44px;
  --fs-home-meal-title-nophoto: calc(44px * var(--font-scale));
  --home-meal-sub: 28px;
  --fs-home-meal-sub: calc(28px * var(--font-scale));
  --home-meal-empty-title: 36px;
  --fs-home-meal-empty-title: calc(36px * var(--font-scale));
  --home-meal-empty-sub: 28px;
  --fs-home-meal-empty-sub: calc(28px * var(--font-scale));
  --setup-disc: 84px;
  --fs-setup-disc: calc(84px * var(--font-scale));
  --setup-disc-border: 3px;
  --fs-setup-disc-border: calc(3px * var(--font-scale));
  --setup-disc-gap: 22px;
  --fs-setup-disc-gap: calc(22px * var(--font-scale));
  --setup-wordmark: 58px;
  --fs-setup-wordmark: calc(58px * var(--font-scale));
  --setup-header-gap: 44px;
  --fs-setup-header-gap: calc(44px * var(--font-scale));
  --setup-col-gap: 96px;
  --fs-setup-col-gap: calc(96px * var(--font-scale));
  --setup-qr-col: 520px;
  --fs-setup-qr-col: calc(520px * var(--font-scale));
  --setup-left-gap: 40px;
  --fs-setup-left-gap: calc(40px * var(--font-scale));
  --setup-left-gap-notice: 20px;
  --fs-setup-left-gap-notice: calc(20px * var(--font-scale));
  --setup-notice-pad-v: 26px;
  --fs-setup-notice-pad-v: calc(26px * var(--font-scale));
  --setup-notice-pad-h: 32px;
  --fs-setup-notice-pad-h: calc(32px * var(--font-scale));
  --setup-notice-gap: 6px;
  --fs-setup-notice-gap: calc(6px * var(--font-scale));
  --setup-notice-title: 40px;
  --fs-setup-notice-title: calc(40px * var(--font-scale));
  --setup-notice-sub: 30px;
  --fs-setup-notice-sub: calc(30px * var(--font-scale));
  --setup-title: 76px;
  --fs-setup-title: calc(76px * var(--font-scale));
  --setup-steps-gap: 18px;
  --fs-setup-steps-gap: calc(18px * var(--font-scale));
  --setup-step-text: 40px;
  --fs-setup-step-text: calc(40px * var(--font-scale));
  --setup-step-num: 44px;
  --fs-setup-step-num: calc(44px * var(--font-scale));
  --setup-step-num-w: 34px;
  --fs-setup-step-num-w: calc(34px * var(--font-scale));
  --setup-step-num-gap: 26px;
  --fs-setup-step-num-gap: calc(26px * var(--font-scale));
  --setup-code: 168px;
  --fs-setup-code: calc(168px * var(--font-scale));
  --setup-code-group-gap: 64px;
  --fs-setup-code-group-gap: calc(64px * var(--font-scale));
  --setup-code-hint-gap: 14px;
  --fs-setup-code-hint-gap: calc(14px * var(--font-scale));
  --setup-code-hint: 34px;
  --fs-setup-code-hint: calc(34px * var(--font-scale));
  --setup-expired: 84px;
  --fs-setup-expired: calc(84px * var(--font-scale));
  --setup-expired-gap: 30px;
  --fs-setup-expired-gap: calc(30px * var(--font-scale));
  --setup-button-text: 40px;
  --fs-setup-button-text: calc(40px * var(--font-scale));
  --setup-button-pad-v: 22px;
  --fs-setup-button-pad-v: calc(22px * var(--font-scale));
  --setup-button-pad-h: 44px;
  --fs-setup-button-pad-h: calc(44px * var(--font-scale));
  --setup-button-radius: 8px;
  --fs-setup-button-radius: calc(8px * var(--font-scale));
  --setup-connected: 112px;
  --fs-setup-connected: calc(112px * var(--font-scale));
  --setup-connected-gap: 28px;
  --fs-setup-connected-gap: calc(28px * var(--font-scale));
  --setup-connected-sub: 40px;
  --fs-setup-connected-sub: calc(40px * var(--font-scale));
  --setup-connected-disc: 420px;
  --fs-setup-connected-disc: calc(420px * var(--font-scale));
  --setup-connected-disc-border: 4px;
  --fs-setup-connected-disc-border: calc(4px * var(--font-scale));
  --setup-qr: 380px;
  --fs-setup-qr: calc(380px * var(--font-scale));
  --setup-qr-pad: 40px;
  --fs-setup-qr-pad: calc(40px * var(--font-scale));
  --setup-qr-pad-bottom: 34px;
  --fs-setup-qr-pad-bottom: calc(34px * var(--font-scale));
  --setup-qr-gap: 22px;
  --fs-setup-qr-gap: calc(22px * var(--font-scale));
  --setup-qr-caption: 32px;
  --fs-setup-qr-caption: calc(32px * var(--font-scale));
  --focus-outline: 6px;
  --focus-offset-cell: 3px;
  --focus-scale-cell: 1.04;
  --focus-offset-chip: 5px;
  --focus-scale-chip: 1.03;
  --focus-offset-todo: 6px;
  --focus-scale-todo: 1.02;
  --focus-offset-switch: 5px;
  --focus-scale-switch: 1.03;
}

[data-theme="dark"] {
  --bg: #204C47;
  --surface: #F6F2E8;
  --surface2: #E5DFD0;
  --today-bg: #CEE2D8;
  --disc: #F0EBDC;
  --disc-edge: #F0EBDC;
  --c-act: #246099;
  --c-food: #BA882E;
  --c-todo: #3B723E;
  --check-ink: #F8F5EC;
  --on-food: #1C2A26;
  --heading: #16524F;
  --photo: #B6C6BF;
  --ink-ground: #F3EEE1;
  --ink-soft-ground: #BBD0C8;
  --ink-card: #1C2A26;
  --ink-soft-card: #475A54;
  --selected: #F6F2E8;
  --on-selected: #1C2A26;
  --selected-card: #6D3B58;
  --on-selected-card: #F8F5EC;
  --brand-ink: #F3EEE1;
  --track: #4E716C;
  --accent: #71BBB1;
  --accent-ink-ground: #A2DBD3;
  --accent-ink-card: #1E5F5C;
  --on-accent: #1C2A26;
  --accent-card: #1E5F5C;
  --on-accent-card: #F8F5EC;
}

[data-accent="plum"] {
  --accent: #6D3B58;
  --accent-ink-ground: #6D3B58;
  --accent-ink-card: #6D3B58;
  --on-accent: #F8F5EC;
  --selected: #1E5F5C;
  --accent-card: #6D3B58;
  --on-accent-card: #F8F5EC;
}

[data-theme="dark"][data-accent="plum"] {
  --accent: #D2A0BB;
  --accent-ink-ground: #EAC4D8;
  --accent-ink-card: #6D3B58;
  --on-accent: #1C2A26;
  --selected-card: #1E5F5C;
  --accent-card: #6D3B58;
  --on-accent-card: #F8F5EC;
  --selected: #F6F2E8;
}

[data-font-scale="large"] {
  --font-scale: 1.15;
}