@layer base {
  :root {
    --primary-color: theme('colors.primary.DEFAULT');
    --secondary-color: theme('colors.secondary.DEFAULT');

    --sidebar-inline-size: 260px;
    --web-layout-header-height: 64px;

    --text-body-color: theme('colors.slate.700');
    --text-body-light-color: theme('colors.slate.600');
    --text-heading-color: theme('colors.slate.900');
    --text-caption-color: theme('colors.primary.700');

    --label-text-color: theme('colors.slate.950');
    --label-hint-text-color: theme('colors.slate.800/0.75');
    --label-font-weight: theme(fontWeight.normal);
    --label-hint-font-weight: theme(fontWeight.normal);
    --label-font-size: theme('fontSize.base');
    --label-hint-font-size: theme('fontSize.base');
    --label-line-height: theme('lineHeight.7');
    --label-hint-line-height: theme('lineHeight.7');

    --vs-border-radius: theme('borderRadius.lg');
  }
  :where(html) {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--web-layout-header-height) + 4rem);

    interpolate-size: allow-keywords;

    &:has(.app-layout) {
      background-color: theme("backgroundColor.primary.50");
      scrollbar-gutter: stable;
    }
  }
}