/* Elffuss Token to Token (T2T): design tokens and base. Dark only (color-scheme: dark).
   Contrast on --bg (#090a11): --fg 16.3:1, --muted 6.29:1, --accent 8.18:1, --accent2-text 8.36:1,
   --ok 7.89:1, --warn 9.19:1, --err 7.27:1 (all above 5.5:1 on --bg3 too, --muted 5.54:1). --accent2 (#8272ff) is decorative only: borders and focus rings,
   never text. Primary buttons: --bg text on the accent gradient, 5.46:1 at its darkest end. Never white on
   --accent2 (3.62:1) and never #5a6480 (3.36:1). */

:root {
  --bg: #090a11;
  --bg2: #101317;
  --bg3: #161a24;
  --line: #20252c;
  --line-strong: #2e3542;
  --fg: #eae8f2;
  --muted: #8b929c;
  --accent: #c8a06a;
  --accent2: #8272ff;
  --accent2-text: #a99cff;
  --ok: #3fb970;
  --warn: #e5a53a;
  --err: #ff6b8b;

  --grad: linear-gradient(135deg, var(--accent), var(--accent2));
  --tint-accent: rgba(200, 160, 106, 0.12);
  --tint-accent2: rgba(130, 114, 255, 0.14);
  --tint-ok: rgba(63, 185, 112, 0.12);
  --tint-warn: rgba(229, 165, 58, 0.12);
  --tint-err: rgba(255, 107, 139, 0.12);

  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --r1: 8px;
  --r2: 12px;
  --r3: 999px;

  --focus-ring: 3px solid var(--accent2-text);
  --focus-offset: 2px;
  --header-h: 56px;
  --tabbar-h: 56px;
  --hit: 44px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  /* Focus never lands under the sticky header or the fixed tab bar (WCAG 2.4.11): scrolling into view keeps
     this much room at each edge. The tab bar exists only under 960 px (layout.css). */
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
}

@media (min-width: 960px) {
  html {
    scroll-padding-bottom: 16px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color-scheme: dark;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--s3);
  letter-spacing: 0.005em;
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
}

h2 {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
}

h3 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 var(--s3);
}

a {
  color: var(--accent2-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--fg);
}

small,
.muted {
  color: var(--muted);
}

code,
kbd,
pre,
samp {
  font-family: var(--mono);
  font-size: 0.92em;
}

img,
svg,
canvas {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s5) 0;
}

::selection {
  background: var(--tint-accent2);
  color: var(--fg);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* Headings focused by the router after navigation: no ring for the mouse, a ring for the keyboard. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 1000;
  padding: var(--s3) var(--s4);
  min-height: var(--hit);
  background: var(--bg3);
  color: var(--fg);
  border: 2px solid var(--accent2-text);
  border-radius: var(--r1);
}

.skip-link:focus {
  top: var(--s2);
}

.hash,
.addr,
code {
  overflow-wrap: anywhere;
  word-break: normal;
}

.hash {
  font-family: var(--mono);
  font-size: 0.92em;
}

.num {
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

/* Reduced motion: no animation or transition is created at all (nothing in the web waits for their events). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}