:root {
  --font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  --c-primary: #6750a4;
  --c-on-primary: #ffffff;
  --c-primary-container: #eaddff;
  --c-on-primary-container: #21005d;
  --c-secondary-container: #e8def8;
  --c-tertiary-container: #ffd8e4;
  --c-surface: #fef7ff;
  --c-surface-1: #f3edf7;
  --c-surface-2: #ece6f0;
  --c-on-surface: #1d1b20;
  --c-on-surface-var: #49454f;
  --c-outline: #938f99;
  --c-error: #b3261e;
  --c-on-error: #ffffff;
  --c-ok: #1b7f3b;
  --c-scrim: rgba(0, 0, 0, .4);

  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-full: 999px;

  --fs-display: clamp(3.2rem, 11vw, 7rem);
  --fs-headline: clamp(1.6rem, 4vw, 2.4rem);
  --fs-title: 1.25rem;
  --fs-body: 1rem;
  --fs-label: .8125rem;

  --elev-1: 0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.1);
  --elev-2: 0 6px 18px rgba(0,0,0,.16);
  --elev-3: 0 14px 40px rgba(0,0,0,.22);

  --spring-fast: linear(0, .42 8%, .86 18%, 1.06 30%, 1.03 42%, .99 58%, 1);
  --spring-slow: linear(0, .25 6%, .68 16%, 1.1 30%, 1.05 40%, .98 55%, 1.005 75%, 1);
  --t-fast: .35s;
  --t-slow: .6s;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-scrim: rgba(0, 0, 0, .6);
  --elev-1: 0 1px 3px rgba(0,0,0,.5);
  --elev-2: 0 6px 18px rgba(0,0,0,.5);
  --elev-3: 0 14px 40px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}