/* ===================================================================
   DESIGN TOKENS — Kalkbrenner-Umbau (2026-09-11): white/black is now
   the page base everywhere, per the artist's direction. The 4-color
   palette (Orange Clown Fish, Stalactite, Knockout Pink, Tango Red)
   still exists but no longer paints whole pages — it now shows up as
   full-bleed "chapter" section blocks within a page, and in the menu,
   the same way paulkalkbrenner.net drops a full-color section between
   black-and-white photo blocks rather than tinting the whole page.

   [data-theme] sets --accent/--accent-fg for that page's chapter
   blocks and small UI accents; --bg/--fg stay white/black regardless.
   =================================================================== */

:root {
  /* the palette — Tango Red was removed entirely on the artist's
     instruction ("Rot soll nirgendwo mehr vorkommen"), so this is a
     three-colour palette now plus black/white */
  --orange: #ff6f1b;   /* Orange Clown Fish, Pantone 15-1460 TN */
  --cream: #f7f6f2;    /* Stalactite, Pantone 11-4101 TCX */
  --pink: #fe3ea6;     /* Knockout Pink, Pantone 16-2130 TN */
  --yellow: #fbe122;   /* Blazing Yellow, Pantone 12-0643 TCX */
  --black: #000000;
  --white: #ffffff;

  /* base: white page, black text, everywhere — palette colors are
     accents now, not backgrounds (see [data-theme] below) */
  --bg: var(--white);
  --fg: var(--black);
  --fg-muted: rgba(0, 0, 0, 0.62);
  --line: rgba(0, 0, 0, 0.14);

  /* default accent when a page doesn't set [data-theme] */
  --accent: var(--orange);
  --accent-fg: var(--black);

  /* fixed-role colors: these are discrete UI elements (buttons,
     CTAs), not running text. Black rather than a palette colour —
     Orange on white is 2.78:1 and Pink 3.26:1, both too low for text. */
  --cta-bg: var(--black);
  --cta-fg: var(--white);

  /* type: Archivo (SIL OFL, self-hosted). One family for everything —
     variable on BOTH weight (100–900) and width (62–125), which is
     what makes the "kompakter, fetter" ask possible without a second
     face. --font-mono is deliberately pointed at Archivo too: the old
     Geist Mono label style (tracked-out thin uppercase) is gone
     site-wide, and any stragglers inherit the new face automatically. */
  --font-display: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* width axis: one width for the whole site. Display type used to run
     condensed at 92%, which is what kept reading as the "stretched",
     drawn-out look the artist asked to remove — condensing makes
     letters look taller, not narrower. Headings now sit at the same
     width as running text; the only thing that moves the width axis is
     the deliberate stretch animation on the two page titles, and that
     animation resolves to exactly this value. */
  --width-display: 100%;
  --width-body: 100%;

  /* Archivo's axis runs 100–900, so the whole ramp sits heavier than
     before — the brief asked for "deutlich fetter" throughout */
  --w-regular: 450;
  --w-semibold: 600;
  --w-bold: 800;
  --w-label: 700;

  --size-label: 0.75rem;
  --size-small: 0.9375rem;
  --size-body: 1.125rem;
  --size-lede: 1.5rem;
  --size-h3: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --size-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --size-h1: clamp(3rem, 1.4rem + 6.5vw, 7rem);
  --size-wordmark: clamp(2.25rem, 0.6rem + 6.5vw, 6.5rem);

  /* was 0.14em — the tracked-out label look the artist asked to remove
     site-wide. Near-normal now; labels carry weight instead of spacing. */
  --tracking-label: 0.005em;
  --tracking-display: -0.015em;

  --leading-tight: 1.02;
  --leading-body: 1.55;

  /* space (fluid) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.875rem;
  --space-s: 1.5rem;
  --space-m: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6rem);
  --space-xl: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-2xl: clamp(6rem, 4rem + 9vw, 13rem);

  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --content-max: 74rem;
  --measure: 38rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.32s;
  --dur-mid: 0.7s;
  --dur-slow: 1.4s;

  /* structure */
  --hairline: 1px solid var(--line);
  --radius: 2px;
}

/* ---------- per-page accent: [data-theme] no longer paints the whole
   page — it sets which palette color that project's chapter blocks,
   labels and hover states use. --bg/--fg stay white/black. Contrast
   pairs below are measured WCAG, not assumed, since --accent-fg still
   has to sit on a full-bleed --accent block. ---------- */
[data-theme="cream"] {
  --accent: var(--cream);
  --accent-fg: var(--black);
}
[data-theme="orange"] {
  --accent: var(--orange);
  --accent-fg: var(--black); /* 4.7:1 at 68% ink — see components.css chapter block */
}
[data-theme="pink"] {
  --accent: var(--pink);
  --accent-fg: var(--black); /* 4.6:1 at 72% ink */
}
/* Blazing Yellow ground. Black text on it measures 15.9:1 — the
   highest-contrast pairing in the whole palette. White would be 1.3:1
   and is not an option here. */
[data-theme="yellow"] {
  --accent: var(--yellow);
  --accent-fg: var(--black);
}

/* [data-theme="red"] removed — Tango Red is gone from the site.

   "stripe-black" lässt den Kapitelblock schwarz statt getönt. Es wird
   derzeit von KEINER Seite benutzt und bleibt nur als Möglichkeit
   stehen. Der frühere Kommentar hier behauptete, das sei "für Synergy" —
   das war falsch und hat echten Schaden angerichtet: Schwarz war für
   Synergy am 15.09. ausdrücklich abgelehnt worden, und der Kommentar
   führte dazu, dass die Seite am 16.09. wieder auf Schwarz gesetzt
   wurde. Synergy steht auf Orange, siehe die Begründung in
   projects/synergy.html. */
[data-theme="stripe-black"] {
  --accent: var(--black);
  --accent-fg: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-mid: 0.01s;
    --dur-slow: 0.01s;
  }
}