html,
body {
  background-color: var(--bg);
  color: var(--fg);
  margin: 0;
  color-scheme: light dark;
  font-size: var(--body-size);
}

sm-router[aria-busy="true"] {
  cursor: progress;
}

:root {
  --bg: Canvas;
  --fg: CanvasText;
  --divider-color: color-mix(in oklab, var(--fg) 25%, var(--bg));
  --fg-disabled: GrayText;
  --fg-caption: color-mix(in oklab, var(--fg) 75%, var(--bg));

  --bg-toast: #000;
  --fg-toast: #fff;

  --button-bg: color-mix(in oklab, var(--bg), black 10%);

  --accent: #fca311;
  --on-accent: black;
  --danger: firebrick;
  --on-danger: white;

  --small-radius: 4px;
  --large-radius: 8px;

  --spacing: 1rem;
  --tight-spacing: 0.5rem;

  --button-padding: 2px 4px;

  --input-bg: Field;

  --title-size: 24px;
  --section-title-size: 18px;
  --body-size: 16px;
  --label-size: 14px;
  --caption-size: 12px;

  --shadow-elevation-low: 0px 2px 4px -1px rgba(0, 0, 0, 0.6);
  --shadow-elevation-medium: 0px 30px 60px rgba(0, 0, 0, 0.6);
  --shadow-elevation-high: 0px 60px 120px rgba(0, 0, 0, 0.6);
  --inset-convex: inset 0px 2px 2px -2px rgba(255, 255, 255, 0.4),
    inset 0px -2px 2px 0px rgba(0, 0, 0, 0.4);

  --inset-concave: inset 0px -2px 2px -2px rgba(255, 255, 255, 0.4),
    inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4);

  --toast-z-index: 1000;
}

@supports (color: AccentColor) and (color: AccentColorText) {
  :root {
    --accent: AccentColor;
    --on-accent: AccentColorText;
  }
}

@media (pointer: coarse) {
  :root {
    --tap-target-height: 2rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-toast: white;
    --fg-toast: black;
    --divider-color: color-mix(in oklab, var(--fg) 25%, var(--bg));
    --input-bg: Field;
    --button-bg: color-mix(in oklab, var(--bg), white 10%);
  }
}

::view-transition-group(root),
::view-transition-new(root) {
  animation-duration: 0.125s;
}

::view-transition-old(page-title),
::view-transition-new(page-title) {
  height: 100%;
}