:root {
  --radius: 4px;
  --app-padding: 22px;
  --color-bg: #191a22;
  --color-fg: #1d1f2a;
  --color-border: #383d58;
  --color-accent-1: #9c88df;
  --color-accent-2: #90c058;
  --color-accent-3: #66afe2;
  --color-accent-4: #de7382;
  --text-primary: #9aa2c9;
  --text-secondary: #4c537a;
  --text-header: #bec7f7;
  --transition-duration: 185ms;
  --bg: var(--color-bg);
  --text: var(--text-primary);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color-scheme: dark;
}

:root[data-theme="black"] {
  --color-bg: hsl(233, 15%, 1%);
  --color-fg: hsl(230, 18%, 2%);
  --color-border: hsl(230, 22%, 16%);
  --color-accent-1: hsl(253, 57%, 70%);
  --color-accent-2: hsl(87, 45%, 59%);
  --color-accent-3: hsl(204, 51%, 57%);
  --color-accent-4: hsl(351, 46%, 59%);
  --text-primary: hsl(229, 30%, 75%);
  --text-secondary: hsl(230, 23%, 57%);
  --text-header: hsl(230, 78%, 89%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  transition:
    color var(--transition-duration) ease,
    background-color var(--transition-duration) ease,
    border-color var(--transition-duration) ease,
    fill var(--transition-duration) ease,
    stroke var(--transition-duration) ease;
}

html,
body {
  height: 100vh;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--bg);
}

#root {
  height: 100%;
  background: var(--bg);
}

@media (max-width: 820px) {
  :root {
    --app-padding: 14px;
  }

  #root {
    padding: var(--app-padding);
  }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-group(*) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}