/* SightIn main design language */

/* CSS layer system to cascade styles properly */
@layer reset, base, components;

/* Variables */
@import './src/colors.css' layer(base);
@import './src/shadows.css' layer(base);
@import './src/spacing.css' layer(base);
@import './src/typography.css' layer(base);
@import './src/breakpoints.css' layer(base);

/* Theme */
@import './src/themes/light.css' layer(base);
@import './src/themes/dark.css' layer(base);

/* Components */
@import './src/card.css' layer(components);

/* Utilities */
@import './src/reset.css' layer(reset);
@import './src/transitions.css' layer(base);

:where(:root, :host) {
  /* Font */
  font-family: var(--default-font);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  font-variation-settings: 'opsz' 32;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: var(--text-color);
  background-color: var(--bg-color);
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Prevent layout shifts when the scrollbar appears */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100%;
  /* Reduce scroll bounce and overscroll effects on mobile */
  overscroll-behavior: none;
}

button,
a {
  touch-action: manipulation;
}