/* ============================================================================
   RESET — modern, opinionated
   ============================================================================
   Loaded after tokens.css, before atoms.css.
   Scoped behavior: only consumed on pages that explicitly link this file
   (initially: /design-system).
   ============================================================================ */

/* Border-box on everything, including pseudo-elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margin on everything — we add it back intentionally */
* {
  margin: 0;
}

/* Allow the page to fill the viewport vertically */
html,
body {
  height: 100%;
}

/* Smooth in-page anchor scrolling, but respect reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Better text rendering by default */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

/* Make media block-level and responsive by default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inputs inherit page typography */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Prevent overflow from awkward word-breaks */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dt,
dd {
  overflow-wrap: break-word;
}

/* Fixed-character forms (numerics, code, monospace) get tabular */
code,
pre,
kbd,
samp,
.t-mono,
.t-mono-s {
  font-feature-settings: "tnum", "kern";
  font-variant-numeric: tabular-nums;
}

/* Lists — strip default styling on system pages, opt-in via class */
ul,
ol {
  list-style: none;
  padding: 0;
}

/* Buttons reset — atoms.css adds the visual style */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

/* Anchors inherit color by default; .link adds the underline animation */
a {
  color: inherit;
  text-decoration: none;
}

/* Fieldset reset */
fieldset {
  border: 0;
  padding: 0;
}

/* Hidden but accessible (for icon-only buttons, screenreader labels) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — visible only on keyboard focus, top of every page */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 130; /* above everything */
  padding: 12px 18px;
  background: hsl(0 0% 9%);
  color: hsl(0 0% 99%);
  font-family: "Aeonik", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 10px 0;
  transform: translateY(-100%);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Disable the default focus outline (we draw our own via :focus-visible) */
:focus {
  outline: none;
}

/* Hand-crafted focus halo for keyboard users only.
   Rauno detail: 2px outline OUTSIDE the element with 3px offset filled
   by the page bg, so the ring reads as a halo not as a border. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Inputs / buttons / cards keep their own :focus-visible above. The default
   reaches anchors, summaries, custom controls. */

/* ─────────────────────────────────────────────────────────────────
   Hand-crafted scrollbar (light + dark, Firefox + WebKit)
   Rauno detail: thin track, hover-reveal thumb, hairline color.
   ───────────────────────────────────────────────────────────────── */

/* Firefox + modern */
:root {
  scrollbar-color: var(--hairline) transparent;
  scrollbar-width: thin;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    scrollbar-color: var(--hairline-strong) transparent;
  }
}
:root[data-theme="dark"] {
  scrollbar-color: var(--hairline-strong) transparent;
}

/* WebKit / Chromium — thin, hairline, hover-reveal */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
  transition: background-color 200ms ease-out;
}
*:hover > ::-webkit-scrollbar-thumb,
::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb,
:hover::-webkit-scrollbar-thumb {
  background-color: var(--hairline-strong);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-soft);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}