@import './variables.css' layer(theme);

@layer base {
  :root {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 400;

    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

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

  :where(html, body) {
    color-scheme: dark;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
  }

  body {
    position: relative;
    color: var(--color-on-surface);
    background-color: var(--color-surface);
  }

  :where(h1, h2, h3, h4, h5, h6, p, div, span) {
    margin: 0;
    padding: 0;
  }

  :where(menu) {
    margin: 0;
  }

  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 15;
  }

  .evelation-0 {
    box-shadow: var(--elevation-0);
  }

  .evelation-1 {
    box-shadow: var(--elevation-1-ambient), --var(--elevation-1-umbra);
  }

  .elevation-2 {
    box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
  }

  .elevation-3 {
    box-shadow: var(--elevation-3-ambient), var(--elevation-3-umbra);
  }

  .elevation-4 {
    box-shadow: var(--elevation-4-ambient), var(--elevation-4-umbra);
  }

  .elevation-5 {
    box-shadow: var(--elevation-5-ambient), var(--elevation-5-umbra);
  }
}