@import url("./reset.css");
@import url("./responsive.css");
@import url("./theme.css");
@import url("./icons.css");

:root {
  --global-focus-ring-size: var(--sds-size-stroke-focus-ring);
  --global-focus-ring-color: rgb(0, 106, 255);
  --global-line-height-paragraph: 1.4;
  --global-stack-top: 999;
  --global-stack-focus: 999;
  --global-stack-dialog-backdrop: 9999;
  --global-stack-dialog-container: 99999;
  --global-container-max-width: 75rem;
  --global-dialog-max-width: 32rem;
  --global-tooltip-max-width: calc(var(--global-dialog-max-width) / 2);
  --global-line-height-body: 1.6;
}

.display-none-to-flex {
  display: var(--sds-responsive-display-none-to-flex) !important;
}
.display-flex-to-none {
  display: var(--sds-responsive-display-flex-to-none) !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --global-focus-ring-color: rgb(0, 106, 255);
  }
}

html {
  font-size: 16px;
}

body {
  background: var(--sds-color-background-default-default);
  color: var(--sds-color-text-default-default);
  margin: 0;
}

html,
body {
  height: 100%;
}

#root {
  min-height: 100%;
  width: 100%;
}

body,
button,
textarea,
input,
select {
  font: var(--sds-font-body-base);
}

pre,
code {
  font: var(--sds-font-body-code);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: var(--sds-font-heading);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}