/**
 * @file
 * Design tokens, reset and element defaults.
 *
 * FiveNineteen already worked in custom properties; the token names are kept
 * close to its own so the palette reads the same, but every colour is now
 * expressed once and derived from a small grey ramp plus one accent.
 */

:root {
  /* Grey ramp, carried over from FiveNineteen's Material-ish palette. */
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-300: #e5e5e5;
  --grey-400: #bdbdbd;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;

  /* FiveNineteen used grey-600 (#757575) for the node and comment header bars
     and for links. White on it is 4.5:1 and #757575 on white is 4.6:1 — both
     scrape past AA and fail it for anything but the largest text. grey-700 is
     the same colour a step darker and clears it comfortably. */
  --accent: var(--grey-700);
  --accent-contrast: #fff;

  --surface: #fff;
  --surface-sunken: var(--grey-100);
  --surface-raised: #fff;
  --border: var(--grey-300);
  --border-strong: var(--grey-400);

  --text: var(--grey-800);
  --text-strong: var(--grey-900);
  --text-muted: var(--grey-600);
  --link: var(--grey-700);
  --link-hover: var(--grey-900);

  --header-bg: var(--grey-800);
  --header-text: #fff;
  --footer-bg: var(--grey-800);
  --footer-text: #fff;

  --sidebar-bg: var(--grey-100);
  --sidebar-border: var(--border);
  --sidebar-heading: var(--text-strong);

  --focus-ring: 3px solid #0b6bcb;

  /* Fluid type scale. */
  --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.33vw, 1.39rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.54vw, 1.74rem);
  --step-3: clamp(1.73rem, 1.55rem + 0.86vw, 2.18rem);
  --step-4: clamp(2.07rem, 1.81rem + 1.32vw, 2.72rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;

  --radius: 4px;
  --radius-l: 8px;
  --shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 2px 8px rgb(0 0 0 / 4%);

  --font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: Rokkitt, "Noto Serif", Georgia, serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    --surface: #16181a;
    --surface-sunken: #1d2023;
    --surface-raised: #202427;
    --border: #33383d;
    --border-strong: #474d54;

    --text: #dfe3e6;
    --text-strong: #f5f7f8;
    --text-muted: #a4acb3;
    --link: #b9c2c9;
    --link-hover: #fff;

    --header-bg: #101214;
    --footer-bg: #101214;
    --sidebar-bg: var(--surface-sunken);
    --sidebar-heading: var(--text-strong);
    --accent: #b9c2c9;
    --accent-contrast: #101214;

    --focus-ring: 3px solid #7ab7ff;

    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration:none;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

fieldset {
  border:none;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--border);
  margin-block: var(--space-m);
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

th {
  background: var(--grey-600);
  color: #fff;
  text-align: start;
}

th,
td {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border);
}

tbody tr:nth-child(odd) {
  background: var(--surface-sunken);
}

/* Wide content must scroll inside itself, never the page. */
.text-content table,
.text-content pre {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
  block-size: 1px;
  word-wrap: normal;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--surface);
  color: var(--text-strong);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}