:root {
  color-scheme: light;
  --color-paper: #fbf7f0;
  --color-surface: #fffdf8;
  --color-paper-2: #f0ede6;
  --color-paper-3: #e8e8ee;
  --color-ink: #17203b;
  --color-ink-2: #35405a;
  --color-muted: #5c6371;
  --color-rule: #d8d8d9;
  --color-rule-strong: #9296a0;
  --color-accent: #13266b;
  --color-accent-hover: #0d1c52;
  --color-accent-ink: #fffdf8;
  --color-focus: #a47813;
  --color-error: #a13e2b;
  --color-error-paper: #faeee8;
  --color-success: #28543d;
  --color-success-paper: #edf3e8;
  --color-backdrop: #111b4866;
  --color-transparent: transparent;
  --color-action: #ac2335;
  --color-action-hover: #8f1b2b;
  --color-molecule: #13266b;
  --font-display: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --text-sm: .8125rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953125rem;
  --text-display: clamp(2rem, 2.1vw + 1rem, 2.75rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius: .375rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration: 160ms;
  --shadow-dialog: 0 24px 100px #111b4826;
}