:root {
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-xs: 0 2px 8px rgba(6, 21, 63, 0.06);
  --shadow-sm: 0 8px 24px rgba(6, 21, 63, 0.08);
  --shadow-md: 0 14px 34px rgba(6, 21, 63, 0.12);
  --shadow-lg: 0 22px 48px rgba(6, 21, 63, 0.15);
  --shadow-xl: 0 32px 72px rgba(6, 21, 63, 0.2);
  --shadow-focus: 0 0 0 3px rgba(111, 43, 255, 0.24);

  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0, 1); /* @kind other */
}


:root {
  --layer-page: 0; /* @kind other */
  --layer-card: 10; /* @kind other */
  --layer-menu: 300; /* @kind other */
  --layer-drawer: 500; /* @kind other */
  --layer-modal: 700; /* @kind other */
  --layer-toast: 900; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}