@layer reset, vendor, base, components, patterns, views, overrides;

@import url("./tokens.css") layer(base);
@import url("./bootstrap-bridge.css") layer(components);
@import url("./components.ui.css") layer(components);
@import url("./patterns.css") layer(patterns);
@import url("./patterns.records.css") layer(patterns);
@import url("./patterns.records.state.css") layer(patterns);
@import url("./patterns.overstay.css") layer(patterns);
@import url("./patterns.packages.css") layer(patterns);
@import url("./patterns.events.css") layer(patterns);
@import url("./patterns.dashboard.css") layer(patterns);
@import url("./patterns.chat.css") layer(patterns);
@import url("./patterns.forms.css") layer(patterns);
@import url("./patterns.flags.css") layer(patterns);
@import url("./patterns.mobile.css") layer(patterns);
@import url("./views.css") layer(views);
@import url("./overrides.css") layer(overrides);

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer base {
  body {
    font-family: var(--font-family);
    font-size: var(--font-size-14);
    background: var(--color-bg);
    color: var(--color-text);
  }

  h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-600); }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
}