/* Reset, tokens and type. Layout and components style themselves in their *.style.ts. */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, dl, figure, pre { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:root {
  color-scheme: light dark;
  --paper: light-dark(#f4f6f5, #0f1626);
  --desk: light-dark(#e9eeec, #141d31);
  --sheet: light-dark(#ffffff, #1a2440);
  --ink: light-dark(#14203a, #e6ebf3);
  --ink-soft: light-dark(#4b566d, #a3aec3);
  --rule: light-dark(#d4dcdf, #273252);
  --rule-strong: light-dark(#aab6bd, #3b4870);
  --link: light-dark(#1b48c9, #8eaeff);
  --mark: light-dark(#ffe357, #f2d53c);
  --mark-edge: light-dark(#d9b300, #c9a800);
  --on-mark: #14203a;
  --margin: light-dark(#e2787c, #b8575c);
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

html { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-underline-offset: 0.18em; }
code { font-family: var(--mono); font-size: 0.88em; }
p code, li code, dd code, dt code { padding: 0.05em 0.3em; border-radius: 3px; background: var(--desk); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

button, .button-link {
  display: inline-block; padding: 0.55rem 1rem; border-radius: 6px; font-weight: 600;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none;
}
button:hover:not(:disabled), .button-link:hover { background: transparent; color: var(--ink); }
button:disabled { cursor: default; opacity: 0.4; }

.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}