/* Extraction Compass — base layer: self-hosted fonts, reset, document
   defaults, focus, motion, shared utilities and footer.
   Load AFTER tokens.css and BEFORE any page stylesheet.
   Replaces the @font-face / reset / body / focus copies that used to live
   inline in index.php and in legal.css. */

/* ---------- Self-hosted fonts (no Google Fonts CDN call → no IP transfer) ---------- */
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/roboto-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/roboto-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/roboto-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Roboto Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/roboto-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

/* ---------- Reset / document ---------- */
*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  /* Anker-Sprünge (Skip-Link -> #main, künftige In-Page-Links) landen unter der
     sticky Statusbar statt dahinter. --header-h kommt aus header.js. */
  scroll-padding-top: calc(var(--header-h, 64px) + 8px);
}

body{
  margin: 0;
  background: radial-gradient(ellipse at top left, #202020 0%, var(--bg-void) 55%), var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: var(--accent-red-bright); }

img{ max-width: 100%; }

::selection{ background: var(--accent-red-bright); color: var(--bg-void); }

/* ---------- Focus: one visible ring for every surface ---------- */
:focus-visible{
  outline: 2px solid var(--accent-red-bright);
  outline-offset: 2px;
}

/* ---------- Motion: honour the OS reduce-motion setting everywhere ----------
   Reduce motion, don't erase feedback. Loops and entrance animations are stopped,
   smooth scrolling is dropped, and spatial movement (the hover lifts, the FAQ /
   caret rotations, the skip-link slide) snaps instead of travelling. But colour,
   border, outline, opacity and shadow keep transitioning at --dur-fast, so a
   reduced-motion visitor still sees the same "this is interactive / this changed"
   response as everyone else. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, outline-color, box-shadow, opacity, fill, stroke !important;
    transition-duration: var(--dur-fast, .15s) !important;
    transition-timing-function: ease !important;
  }
}

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

/* Skip link — hidden until focused, then a readout-style chip pinned top-left.
   Targets #main, which every page's primary landmark carries. */
.skip-link{
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-150%);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-red-bright);
  background: var(--accent-red-dim);
  border-left: 3px solid var(--accent-red-bright);
  padding: 10px 14px;
  text-decoration: none;
  transition: transform var(--dur-med) ease;
}
.skip-link:focus-visible{
  transform: translateY(0);
  outline-offset: -2px;
}

/* ---------- Shared footer (identical across tool, blog, legal, calendar…) ---------- */
footer{
  border-top: 1px solid var(--line-soft);
  padding: 26px 0 40px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
footer a{ color: var(--text-dim); margin-left: 14px; text-decoration: none; }
footer a:hover{ color: var(--accent-red-bright); }
footer strong{ color: var(--text-muted); font-weight: 500; }

@media (max-width: 560px){
  footer{ flex-direction: column; }
  footer a{ margin-left: 0; margin-right: 14px; }
}