:root {
  /* https://github.com/unocss/unocss/blob/main/packages/reset/tailwind.md */
  --un-default-border-color: var(--br-normal);
  --navbar-height: 3.5rem;
  --footer-height: 172px;
  --full-viewport: calc(100vh - var(--navbar-height));
  --br-normal: rgba(126, 135, 160, 0.15);
  --bg-html: theme('colors.white');
  --bg-scrollbar-track: var(--bg-highlight);
  --bg-scrollbar-thumb: var(--bg-soft);
  --bg-scrollbar-thumb-hover: var(--bg-primary);
  --bg-highlight: rgba(126, 185, 220, 0.15);
  --bg-primary: var(--fc-primary-soft);
  --bg-soft: rgba(126, 185, 220, 0.35);
  --bg-subtle: theme('colors.gray.50');
  --fc-softer: theme('colors.gray.400');
  --fc-soft: theme('colors.gray.500');
  --fc: theme('colors.gray.700');
  --fc-hard: theme('colors.gray.800');
  --fc-intense: theme('colors.gray.900');
  --fc-primary-soft: theme('colors.lightblue.500');
  --fc-primary: theme('colors.lightblue.600');
  --fc-primary-intense: theme('colors.lightblue.700');
  --w-container: 1376px;
}

@screen md {
  :root {
    --navbar-height: 3.75rem;
  }
}

html.dark {
  --bg-html: theme('colors.warmgray.900');
  --br-normal: rgba(226, 235, 255, 0.15);
  --bg-soft: rgba(195, 185, 185, 0.15);
  --fc-softer: theme('colors.warmgray.500');
  --fc-soft: theme('colors.warmgray.500');
  --fc: theme('colors.warmgray.300');
  --fc-hard: theme('colors.warmgray.200');
  --fc-intense: theme('colors.warmgray.100');
  --fc-primary-soft: theme('colors.lightblue.500');
  --fc-primary-intense: theme('colors.lightblue.500');

  color-scheme: dark
}
