:root {
  --content-width: 77.5rem;
  --padding: 1rem;
  --border-radius: .25rem;
}

:root {
  color-scheme: only light;
  --primary: #d64405;
  --on-primary: #ffffff;
  --primary-hover: #ff5308;
  --primary-active: #ac3503;
  --app: #ffffff;
  --on-app: #262626;
  --surface: #f5f5f5;
  --on-surface: #262626;
  --surface-hover: #f7f7f7;
  --heading-color: #1c1c1c;
  --text: #262626;
  --text-inverted: #ffffff;
  --border: #d4d4d4;
  --highlight-color: #ffd9cb;
}
@media (prefers-contrast: more) {
  :root {
    --primary: #ac3503;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #d64405;
    --on-primary: #ffffff;
    --primary-hover: #ff5308;
    --primary-active: #ac3503;
    --app: #ffffff;
    --on-app: #262626;
    --surface: #f5f5f5;
    --on-surface: #262626;
    --surface-hover: #f7f7f7;
    --heading-color: #1c1c1c;
    --text: #262626;
    --text-inverted: #ffffff;
    --border: #d4d4d4;
    --highlight-color: #ffd9cb;
  }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --primary: #ac3503;
  }
}

:root {
  --tx-s: 0.1s;
  --tx-m: 0.25s;
  --tx-l: 0.4s;
  --tx-x: 0.6s;
  --tx-xx: 1s;
  --interactive-feedback: translateY(-.075em) scale(1.01);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --tx-s: 0s;
    --tx-m: 0s;
    --tx-l: 0s;
    --tx-x: 0s;
    --tx-xx: 0s;
    --interactive-feedback: translateY(0) scale(1);
  }
}
