:root {
  --color-primary: #02a6b7;
  --color-black: #000;
  --color-white: #fafafa;

  --color-background: var(--color-white);
  --color-text: #6b7079;
  --color-text-strong: var(--color-black);
  --color-link: rgba(0, 0, 0, 0.8);
  --color-link-underline: rgba(0, 0, 0, 0.3);
  --color-link-focus: var(--color-black);
  --color-border: rgba(0, 0, 0, 0.2);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --font-mono: SFMono-Regular, "Consolas", "Liberation Mono", "Menlo", monospace;

  --shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0.5rem 0.5rem -0.1rem rgba(0, 0, 0, 0.3);

  --transition: all 0.2s ease-in-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #282c34;
    --color-text: #979fad;
    --color-text-strong: var(--color-white);
    --color-link: rgba(255, 255, 255, 0.8);
    --color-link-underline: rgba(255, 255, 255, 0.3);
    --color-link-focus: var(--color-white);
    --color-border: rgba(255, 255, 255, 0.2);
  }
}