/* Shared base styles for the pp site. Design tokens live in
   src/styles/tokens.css (imported by the layout); everything here consumes
   them through var(). Page-specific layout stays in that page's own <style>
   block until a second page needs it — see .claude/skills/frontend. */

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

html,
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
}

img {
  max-width: 100%;
}

a {
  color: var(--color-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

button {
  font-family: inherit;
  border-radius: var(--radius);
}

/* The design defines no focus ring; keyboard users still need one (R6). */
:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Page shell — promoted here when the Datenschutz page became the second page
   to need it (see .claude/skills/frontend R3). Anything still used by exactly
   one page stays in that page's own <style> block.
   --------------------------------------------------------------------------- */

.page {
  min-height: 100vh;
  padding: 0 var(--space-5) var(--space-10);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(226, 113, 29, 0.16), transparent 42%),
    radial-gradient(circle at 90% 62%, rgba(179, 38, 30, 0.1), transparent 40%);
}

.column {
  max-width: 560px;
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 20px 0 var(--space-3);
  border-bottom: 1px solid var(--hairline-faint);
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* A wrapping row, so the brand line and the legal links sit together on a wide
   screen and stack on a narrow one. */
.site-footer {
  padding: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-meta);
  color: var(--color-muted);
}

/* Same 44px tap target the info page's .fact-link uses. */
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-red);
}

/* Opening paragraph of a page. The top margin differs per page and belongs to
   the page, not here. */
.lede {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Raised paper panel. Padding and inner layout belong to the caller, so a
   variant never has to fight this rule on specificity. */
.card {
  border: 1px solid var(--hairline-box);
  background: var(--color-paper);
}

/* Browsers render a generic monospace family at their own smaller default size,
   so inline code shrinks mid-sentence unless the size is stated outright. */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Red display numeral — the info page's step list and the Datenschutz section
   headings both count in it. */
.numeral {
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  color: var(--color-red);
}