:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: "IM Fell English SC", Georgia, "Times New Roman", serif;
  --font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
  --font-sans: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Spacing scale: margin/padding/gap only, named by their own pixel value. */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-30: 30px;
  /* Corner radii, named by role rather than size. */
  --radius-track: 4px;
  --radius-input: 6px;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-pill: 999px;
  /* Shared height for text/date/number inputs, select, and buttons. */
  --control-height: 40px;
  /* Small-text scale: a label size, a body-small size, and full body size. */
  --text-80: calc(.8rem + 3px);
  --text-sm: calc(.9rem + 3px);
  --text-100: calc(1rem + 3px);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, .18);
  --bg: #F5EFDC;
  --surface: #FAF6E6;
  --card: #FCF1D6;
  --control-bg: #FFFAEA; --control-line: #D8CCAF;
  /* Brand colors for the landing site cards (approximate, from each logo). */
  --brand-trello: #1457B7; --brand-todoist: #E44C3C; --brand-muse: #0A66E6;
  --brass: var(--bar-active);
  /* Leather, brass, lining, and parchment: fixed values, the same in both themes, shared by the app and the landing site. */
  --leather: #694A35; --strap: #49362B; --thread: #3A2312;
  --clasp-brass: #D4BF8C; --clasp-brass-edge: #7A6A3E; --clasp-brass-ring: #A8935F; --wordmark-stamp: #B09E66;
  --engrave: #2B1D0E; --stamp: #2E1B0D;
  --lining: #E0CCA8; --lining-ink: #2B1A0C; --lining-current: #5A1010;
  --pin-edge: #CEB782;
  --parch-fill: #FCF1D6; --parch-edge: #CEB782; --parch-ink: #2F5D8A; --parch-red: #C62F2F; --parch-white: #FFFFFF;
  /* The icon's blue paths are ink blue at 65% over parchment; the light blues (Not started, selection, estimates) are tints of that slate. */
  --slate: #778FA5;
  --shadow-pin:0 2px 2px rgba(0, 0, 0, .3), 0 4px 7px rgba(0, 0, 0, .16);
  --ink: #1A2733;
  --muted: #566772;
  --line: #D3DAD5;
  --planned: #2F5D8A;
  --on-planned: #FFFFFF;
  /* Dark brown, the same in both themes, for objects that stay leather-like (the splash quote box). Buttons use --btn: dark brown in light mode, light brown in dark mode. */
  --brown: #5B3F2A;
  --btn: var(--brown); --on-btn: #FCF1D6; --btn-tan: #D4B48A; --on-btn-tan: #2A1B0E;
  --actual: #C8631A;
  --scope: #FFAC1C; --scope-ink: #1B252D;
  --burn: #C62F2F; --forecast: #8F1F1F;
  --focus: #2F5D8A;
  --late: #A8261C;
  --late-bg: #F8DDD9;
  --milestone: #694C80;
  --milestone-bg: #E8DFF1;
  --chip-idle: #F4ECD8;
  --chip-work: #F6E3C4;
  --chip-done: #CFE6D5;
  --chip-new: #D0DBE5;
  --chip-ink: #1A2733;
  --badge-attention: #4F3416; --badge-attention-bg: #DDC3A5;
  --badge-priority: #4A2E00; --badge-priority-bg: #F8C15A;
  --notice-update: #F8C15A; --notice-backup: #D0DBE5; --notice-welcome: #CFE6D5; --notice-update-bg: color-mix(in srgb, var(--notice-update) 40%, white); --notice-backup-bg: color-mix(in srgb, var(--notice-backup) 45%, white); --tutorial: #E39A2D; --tutorial-hover: #EBAA48; --tutorial-edge: #B87718; --on-tutorial: #1B1B1B; --on-tutorial-btn: #1B1B1B;
  --badge-active: #6B4A0F; --badge-active-bg: #F6E3C4; --bar-active: #C99A3E;
  --badge-pending: #34475A; --badge-pending-bg: #D0DBE5; --bar-pending: #7E97AD;
  --badge-done: #315C3C; --badge-done-bg: #CFE6D5; --bar-done: #74AD85;
  --badge-neutral: #47433E; --badge-neutral-bg: #D4D1CD;
  --badge-info: #275568; --badge-info-bg: #CFE3EC;
  --est: #C5D1DC;
  --sel: #EFE4CA;
  /* Same six values in both themes -- confetti reads as festive against either background. */
  --confetti-1: #2F5D8A; --confetti-2: #C62F2F; --confetti-3: #2E8B57;
  --confetti-4: #E8A33D; --confetti-5: #7B5EA7; --confetti-6: #D4587A;
  --scrim: rgba(15, 25, 35, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1814; --surface: #26211C; --card: #342D25; --control-bg: #1C1814; --control-line: #7C6F60; --ink: #EDE6DA; --muted: #B3A898; --line: #3B332B;
    --btn: #D4B48A; --on-btn: #2A1B0E; --pin-edge: #71613A; --planned: #86B4E0; --on-planned: #0F1A24; --actual: #F0A25A; --scope: #FFAC1C; --scope-ink: #1B252D; --burn: #E5534B; --forecast: #C23B34; --focus: #86B4E0; --late: #F2A29B; --late-bg: #4A2723;
    --chip-idle: #302A23; --chip-work: #4A3B22; --chip-done: #21402C; --chip-new: #2A4560; --chip-ink: #EDE6DA; --est: #34506B; --sel: #3B3228; --scrim: rgba(0, 0, 0, .6);
    --badge-attention: #E8C6A6; --badge-attention-bg: #4D3428;
    --badge-priority: #FFCB80; --badge-priority-bg: #6E4410;
    --notice-update: #6E4410; --notice-backup: #2A4560; --notice-welcome: #21402C; --notice-update-bg: color-mix(in srgb, var(--notice-update) 60%, var(--bg)); --notice-backup-bg: color-mix(in srgb, var(--notice-backup) 60%, var(--bg)); --tutorial: #E39A2D; --tutorial-hover: #EBAA48;
    --badge-active: #F0D49A; --badge-active-bg: #4A3B22; --bar-active: #A98232;
    --badge-pending: #D5DEE6; --badge-pending-bg: #3A4754; --bar-pending: #6A8BAA;
    --badge-done: #B5DDBF; --badge-done-bg: #21402C; --bar-done: #4E9A68;
    --badge-neutral: #D8D4CF; --badge-neutral-bg: #403C38;
    --badge-info: #C8DFE9; --badge-info-bg: #2F4E5C;
    --milestone: #D0B6E1; --milestone-bg: #382D43;
  }
}
:root[data-theme="dark"] {
  --bg: #1C1814; --surface: #26211C; --card: #342D25; --control-bg: #1C1814; --control-line: #7C6F60; --ink: #EDE6DA; --muted: #B3A898; --line: #3B332B;
  --btn: #D4B48A; --on-btn: #2A1B0E; --pin-edge: #71613A; --planned: #86B4E0; --on-planned: #0F1A24; --actual: #F0A25A; --scope: #FFAC1C; --scope-ink: #1B252D; --burn: #E5534B; --forecast: #C23B34; --focus: #86B4E0; --late: #F2A29B; --late-bg: #4A2723;
  --chip-idle: #302A23; --chip-work: #4A3B22; --chip-done: #21402C; --chip-new: #2A4560; --chip-ink: #EDE6DA; --est: #34506B; --sel: #3B3228; --scrim: rgba(0, 0, 0, .6);
  --badge-attention: #E8C6A6; --badge-attention-bg: #4D3428;
  --badge-priority: #FFCB80; --badge-priority-bg: #6E4410;
  --notice-update: #6E4410; --notice-backup: #2A4560; --notice-welcome: #21402C; --notice-update-bg: color-mix(in srgb, var(--notice-update) 60%, var(--bg)); --notice-backup-bg: color-mix(in srgb, var(--notice-backup) 60%, var(--bg)); --tutorial: #E39A2D; --tutorial-hover: #EBAA48;
  --badge-active: #F0D49A; --badge-active-bg: #4A3B22; --bar-active: #A98232;
  --badge-pending: #D5DEE6; --badge-pending-bg: #3A4754; --bar-pending: #6A8BAA;
  --badge-done: #B5DDBF; --badge-done-bg: #21402C; --bar-done: #4E9A68;
  --badge-neutral: #D8D4CF; --badge-neutral-bg: #403C38;
  --badge-info: #C8DFE9; --badge-info-bg: #2F4E5C;
  --milestone: #D0B6E1; --milestone-bg: #382D43;
}