:root {
  color-scheme: light dark;
  --fg-color: light-dark(#444, #ddd);
  --bg-color: light-dark(#fff, #222);
  --bg-alpha-color: color-mix(in srgb, var(--bg-color), transparent 25%);
  --bg-light-color: light-dark(#eee, #333);
  --border-color: light-dark(#ddd, #444);
  --border-strong-color: light-dark(#bbb, #666);
  --border-stronger-color: light-dark(#999, #888);
  --spacing: 12px;
  --radius: 8px;
  --link-color: light-dark(RoyalBlue, SkyBlue);
  --link-light-color: color-mix(in srgb, var(--link-color) 30%, var(--bg-color));
  --link-lighter-color: color-mix(
    in srgb,
    var(--link-color) 15%,
    var(--bg-color)
  );
  --text-size: 16px;
  --line-color: light-dark(#ccc, #555);
  --checkerboard-bg: repeating-conic-gradient(
      var(--bg-light-color) 0% 25%,
      var(--bg-color) 0% 50%
    )
    50% / 16px 16px;
  --backdrop-color: rgba(0, 0, 0, 0.75);

  --real-blue-color: #007bff;
  --blue-color: light-dark(
    var(--real-blue-color),
    color-mix(in srgb, var(--real-blue-color) 70%, #fff)
  );
  --real-green-color: #28a745;
  --green-color: light-dark(
    var(--real-green-color),
    color-mix(in srgb, var(--real-green-color) 70%, #fff)
  );
  --real-red-color: #dc3545;
  --red-color: light-dark(
    var(--real-red-color),
    color-mix(in srgb, var(--real-red-color) 70%, #fff)
  );
  --real-orange-color: #fd7e14;
  --orange-color: light-dark(
    var(--real-orange-color),
    color-mix(in srgb, var(--real-orange-color) 30%, #fff)
  );

  --sai-top: env(safe-area-inset-top);
  --sai-right: env(safe-area-inset-right);
  --sai-bottom: env(safe-area-inset-bottom);
  --sai-left: env(safe-area-inset-left);

  interpolate-size: allow-keywords;
  --monospace-font: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono';

  --hairline-width: 1px;
  @media (min-resolution: 2dppx) {
    --hairline-width: 0.7px;
  }
}

html,
body {
  text-size-adjust: 100%;
  --webkit-text-size-adjust: 100%;
}

html[data-theme='light'] {
  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

body {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-size: var(--text-size);
  margin: 0;
  padding: 0;
  color: var(--fg-color);
  background-color: var(--bg-color);
}

button,
.button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  padding: calc(var(--spacing) / 2);
  background-color: var(--bg-color);
  color: var(--fg-color);
}

button,
.button,
input[type='submit'],
input[type='button'],
select {
  border: var(--hairline-width) solid var(--border-strong-color);
  border-radius: var(--radius);
  font-weight: 500;
  padding: calc(var(--spacing) / 2) var(--spacing);

  &:not(:disabled) {
    cursor: pointer;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  &:not(:disabled):hover,
  &:focus {
    border-color: var(--border-stronger-color);
  }

  &:not(:disabled):active {
    transform: scale(0.975);
  }

  &[data-pressed='true'] {
    filter: brightness(0.9);
  }

  &.small {
    padding: calc(var(--spacing) / 4) calc(var(--spacing) / 2);
    font-size: small;
    border-radius: calc(var(--radius) * 0.65);
  }

  &:is(a) {
    display: inline-block;
    border-color: var(--link-light-color);
    text-decoration: none;
    color: var(--link-color);

    &:not(:disabled):hover,
    &:focus {
      border-color: var(--link-color);
    }
  }
}

:is(button, .button):not([hidden]) {
  display: inline-flex;
  place-items: center;
  justify-content: center;

  &.button-primary {
    font-weight: bold;
    border-color: var(--border-stronger-color);
    box-shadow: inset 0 0 0 var(--hairline-width) var(--border-strong-color);

    &:not(:disabled):hover,
    &:focus {
      border-color: var(--fg-color);
    }
  }
}

input[type='text'],
input[type='password'],
input[type='search'],
input[type='url'],
textarea {
  border: var(--hairline-width) solid var(--border-stronger-color);
  border-radius: calc(var(--radius) / 2);
}

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

.insignificant {
  opacity: 0.6;
}

a {
  color: var(--link-color);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;

  &:not(:hover, &:focus) {
    text-decoration-color: var(--link-light-color);
  }
}

b {
  font-weight: 500;
}

hr {
  border: 0;
  border-top: var(--hairline-width) solid var(--border-strong-color);
}

/* :root {
  --hue: 30deg;
  filter: hue-rotate(var(--hue));
  --light-bg-color: hsl(var(--hue) 50% 98%);
  --dark-bg-color: hsl(var(--hue) 50% 2%);
  --bg-color: light-dark(var(--light-bg-color), var(--dark-bg-color));

  img,
  video {
    filter: hue-rotate(calc(var(--hue) * -1));
  }
} */
