* {
  box-sizing: border-box;
}

html,
body {
  min-width: var(--design-min-width);
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--design-text-primary);
  background: var(--design-bg-base);
  font-family: var(--design-font-sans);
  font-size: var(--design-fs-base);
  line-height: var(--design-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a:not(.btn),
a:link:not(.btn),
a:visited:not(.btn) {
  color: var(--design-accent);
}

a:hover:not(.btn),
a:focus:not(.btn) {
  color: var(--design-accent-hover);
  text-decoration: underline;
}

a.link:link,
a.link:active,
a.link:visited {
  color: var(--design-accent);
  text-decoration: none;
}

a.link:hover,
a.link:focus {
  color: var(--design-accent-hover);
  text-decoration: underline;
}

::placeholder {
  color: var(--design-text-muted) !important;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--design-text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 var(--design-sp-4);
  padding: 0 0 var(--design-sp-3);
  border-bottom: 1px solid var(--design-border);
  box-shadow: none;
  font-size: var(--design-fs-2xl);
}

h4.subtitle,
h5.subtitle,
.subtitle {
  padding: 0 0 0 var(--design-sp-3);
  border-left: 4px solid var(--design-accent);
  box-shadow: none;
}

hr {
  border-color: var(--design-border);
  opacity: 1;
}

.text-information,
.text-disabled,
.dim {
  color: var(--design-text-muted);
}

.text-error,
.error,
.text-alert {
  color: var(--design-danger);
}

.text-fine {
  color: var(--design-success);
}

.required-mark {
  color: var(--design-danger);
}

.hidden {
  display: none;
}