main.css

/* Base reset and defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root[data-theme='dark'] {
  /* background colors */
  --bg: oklch(0.145 0 0);
  --bg-subtle: oklch(0.178 0 0);
  --bg-muted: oklch(0.218 0 0);
  --bg-elevated: oklch(0.252 0 0);

  /* text colors */
  --fg: oklch(0.985 0 0);
  --fg-muted: oklch(0.709 0 0);
  --fg-subtle: oklch(0.633 0 0);

  /* border, seperator colors */
  --border: oklch(0.269 0 0);
  --border-subtle: oklch(0.239 0 0);
  --border-hover: oklch(0.371 0 0);

  /* accent color, set by user from settings */
  --accent: var(--accent-color, oklch(1 0 0));
  --accent-muted: var(--accent-color, oklch(0.922 0 0));

  /* syntax highlighting colors */
  --syntax-fn: oklch(0.727 0.137 299.149);
  --syntax-str: oklch(0.829 0.088 252.458);
  --syntax-kw: oklch(0.721 0.162 15.494);
  --syntax-comment: oklch(0.551 0.019 250.976);

  /* badge colors for background & text */
  --badge-orange: oklch(0.67 0.185 55);
  --badge-yellow: oklch(0.588 0.183 91);
  --badge-green: oklch(0.566 0.202 165);
  --badge-cyan: oklch(0.571 0.181 210);
  --badge-blue: oklch(0.579 0.191 252);
  --badge-indigo: oklch(0.573 0.262 276.966);
  --badge-purple: oklch(0.495 0.172 295);
  --badge-pink: oklch(0.584 0.189 343);
}

:root[data-theme='light'] {
  --bg: oklch(1 0 0);
  --bg-subtle: oklch(0.979 0.001 286.375);
  --bg-muted: oklch(0.955 0 0);
  --bg-elevated: oklch(0.94 0 0);

  --fg: oklch(0.145 0 0);
  --fg-muted: oklch(0.439 0 0);
  --fg-subtle: oklch(0.52 0 0);

  --border: oklch(0.8514 0 0);
  --border-subtle: oklch(0.922 0 0);
  --border-hover: oklch(0.715 0 0);

  --accent: var(--accent-color, oklch(0.145 0 0));
  --accent-muted: var(--accent-color, oklch(0.205 0 0));

  --syntax-fn: oklch(0.502 0.188 294.988);
  --syntax-str: oklch(0.425 0.152 252);
  --syntax-kw: oklch(0.588 0.193 20.469);
  --syntax-comment: oklch(0.551 0.019 250.976);

  --badge-blue: oklch(0.579 0.191 252);
  --badge-yellow: oklch(0.588 0.183 91);
  --badge-green: oklch(0.566 0.202 165);
  --badge-indigo: oklch(0.457 0.24 277.023);
  --badge-purple: oklch(0.495 0.172 295);
  --badge-orange: oklch(0.67 0.185 55);
  --badge-pink: oklch(0.584 0.189 343);
  --badge-cyan: oklch(0.571 0.181 210);
}

@media (prefers-contrast: more) {
  :root[data-theme='dark'] {
    /* text colors */
    --fg: oklch(1 0 0);
    --fg-muted: oklch(0.769 0 0);
    --fg-subtle: oklch(0.693 0 0);

    /* border, separator colors */
    --border: oklch(0.769 0 0);
    --border-subtle: oklch(0.739 0 0);
    --border-hover: oklch(0.771 0 0);
  }

  :root[data-theme='light'] {
    /* text colors */
    --fg: oklch(0 0 0);
    --fg-muted: oklch(0.329 0 0);
    --fg-subtle: oklch(0.4 0 0);

    /* border, separator colors */
    --border: oklch(0.3514 0 0);
    --border-subtle: oklch(0.422 0 0);
    --border-hover: oklch(0.315 0 0);
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
}

/* Disable smooth scrolling if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
 * Enable CSS scroll-state container queries for the document
 * This allows the footer to query the scroll state using pure CSS
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
 */
@supports (container-type: scroll-state) {
  html {
    container-type: scroll-state;
  }
}

html[dir='rtl'] .rtl-flip {
  transform: scale(-1, 1);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

/* Default link styling for accessibility on dark background */
a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fg-subtle);
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reset dd margin (browser default is margin-left: 40px) */
dd {
  margin: 0;
}

/* Reset button styles */
button {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection */
::selection {
  background-color: var(--fg-muted);
  color: var(--bg-subtle);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* Scrollbar styling for Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg);
  }
}

/* Shiki theme colors */
html.light .shiki,
html.light .shiki span {
  color: var(--shiki-light) !important;
  background-color: var(--shiki-light-bg) !important;
  font-style: var(--shiki-light-font-style) !important;
  font-weight: var(--shiki-light-font-weight) !important;
  text-decoration: var(--shiki-light-text-decoration) !important;
}

/* Inline code in package descriptions */
p > span > code,
.line-clamp-2 code {
  @apply font-mono;
  font-size: 0.85em;
  background: var(--bg-muted);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* View transition for search box (includes / and input) */
.search-box {
  view-transition-name: search-box;
}

/* Safari search input fixes */
input[type='search'] {
  -webkit-appearance: none;
  appearance: none;
}

@media screen and (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Disable the default fade transition on page navigation */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Customize the view transition animations for specific elements */
::view-transition-old(search-box),
::view-transition-new(search-box) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Locking the scroll whenever any of the modals are open */
html:has(dialog:modal) {
  overflow: hidden;
  scrollbar-gutter: stable;
}