/**
 * Cambium Design Tokens — Werkbund Deco.
 *
 * Das konsumierbare Paket des geltenden Designsystems. Eine Wahrheit für alle Anwendungen:
 *
 *     @import "@cambium/design-tokens/tokens.css";     Variablen (diese Datei)
 *     @import "@cambium/design-tokens/werkbund.css";   Bauteil-Schicht
 *     @import "@cambium/design-tokens/fonts.css";      Schriftbindung, self-hosted
 *
 * ── HERKUNFT UND RICHTUNG DER WAHRHEIT ─────────────────────────────────────────────────
 *
 * Vorlage ist `docs/design/claude-design/design-system/tokens/` — dort wird geändert, hier
 * nachgezogen, nie umgekehrt (ADR-SUITE-DESIGN-CANON-02, `LIESMICH.md` des Designsystems:
 * „hier stehen die Werte, dort entsteht das konsumierbare Paket").
 *
 * Diese Datei ist die ZUSAMMENFÜHRUNG von drei Vorlagedateien — `colors.css`,
 * `typography.css`, `spacing.css` — plus einer eigenen Ergänzung (Befundzustände, unten).
 * Sie ist deshalb bewusst KEINE byte-identische Kopie; der Wächter arbeitet auf Wertebene:
 * `klammer/tests/test_werkbund_fundament.py` prüft, dass JEDES `--name:wert`-Paar der drei
 * Vorlagedateien hier wörtlich und im richtigen Geltungsbereich wiederkehrt. Läuft die
 * Vorlage weiter, schlägt er an (§ 30).
 *
 * `werkbund.css` und `fonts.css` sind dagegen byte-identische Kopien und werden bytewise
 * verglichen — bei ihnen gibt es nichts zusammenzuführen.
 *
 * ── SCHRIFTEN ──────────────────────────────────────────────────────────────────────────
 *
 * Hier stehen nur die Familien-Namen. Die Bindung liegt in `fonts.css`; deren `url()` sind
 * relativ zur Stylesheet-Datei, jeder Konsument legt die woff2 also neben sein CSS.
 * Kein Laufzeitabruf an fremde Hosts (§ 43.5, DESIGN.md § 2).
 *
 * ── ABGELÖST ───────────────────────────────────────────────────────────────────────────
 *
 * Bis zum 2026-08-06 trug diese Datei Navy/Gold/Papier und EB Garamond/Spectral/JetBrains
 * Mono (ADR-SUITE-DESIGN-CANON-01). Der Namensraum `--cambium-*` ist damit entfallen; die
 * Vorlage benennt ihre Rollen unpräfixiert, und ein Übersetzungslayer wäre eine zweite
 * Wahrheit gewesen. Einziger Konsument war die Anmeldestrecke der Klammer; sie ist im
 * selben Zug mitgezogen.
 */

:root {
  /* ── Farben: Basis — Stahlblau/Grau (Werkbund) ──────────────────────────────────────
     Vorlage: design-system/tokens/colors.css */
  --steel-500:#2E5D8A; --steel-600:#264D74; --steel-700:#1E4269; --steel-800:#0E1D2E;
  --steel-300:#96BCE2; --steel-200:#BCD8F0;
  --brass-500:#7A5A1E; --brass-300:#C79A57; --brass-200:#D9B478;   /* Messing — Eyebrows, Hero-CTA, Textlinks */
  --grey-50:#F5F5F3; --grey-100:#EBEEF1; --grey-150:#DBE8F1; --grey-900:#17191C; --grey-950:#101214;
  --ink-strong:#17191C; --ink-soft:#3E434A; --ink-muted:#5C636C;

  /* Semantische Aliase */
  --surface-page:var(--grey-50);
  --surface-raised:var(--grey-100);
  --surface-tint:var(--grey-150);      /* "mint": getönte Kacheln, Zahl-Boxen */
  --surface-brand:var(--steel-500);    /* Ökosystem-Kacheln, Footer */
  --surface-brand-deep:var(--steel-600);
  --surface-hero:var(--grey-950);      /* dunkler Hero-Raum */
  --text-primary:var(--ink-strong);
  --text-secondary:var(--ink-soft);
  --text-muted:var(--ink-muted);
  --text-on-brand:#EDF2F7;
  --text-on-brand-soft:rgba(237,242,247,.85);
  --accent:var(--steel-500);
  --accent-hover:var(--steel-700);
  --accent-on-dark:var(--steel-300);
  --border-hairline:rgba(23,25,28,.14);
  --border-strong:rgba(23,25,28,.55);   /* 3.1:1 über surface-page — Grenze von Bedienelementen, WCAG 1.4.11 */
  --btn-bg:var(--steel-500); --btn-fg:#FFFFFF; --btn-bg-hover:#1E4269; --btn-ring:rgba(46,93,138,.26);
  --tile-hover:#3A6E9E;
  --accent-brass:var(--brass-500);
  --surface-hero-deep:#0E1D2E;      /* Hero-Grund hinter dem Hero-Bild */
  --btn-hero-bg:var(--brass-200); --btn-hero-fg:#17191C;
  --focus-ring:var(--steel-500);

  /* ── Typografie ─────────────────────────────────────────────────────────────────────
     Vorlage: design-system/tokens/typography.css */
  --font-display:'Public Sans',Helvetica,Arial,sans-serif; /* Überschriften, Zitate, Zahlen — Weight 700, kursive Akzente 500 italic */
  --display-weight:700;
  --display-tracking:-.028em;                         /* Public Sans läuft breiter — Tracking fest gegengesteuert */
  --font-body:'IBM Plex Sans',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;              /* Eyebrows, Micro-Labels, Quellenangaben */
  --text-hero:clamp(3.5rem,6.6vw,6.4rem);             /* lh .95, ls -.028em, max-width 12ch */
  --text-h2-xl:clamp(2.4rem,5.4vw,4.4rem);            /* Lösung — lh 1.02, ls -.028em */
  --text-h2:clamp(2.15rem,4.3vw,3.45rem);             /* Standard-Sektionen — lh 1.1, ls -.028em */
  --text-h3:1.8rem;                                   /* Kachel-Titel — lh 1.1 */
  --text-h3-sm:1.45rem;
  --text-stat:clamp(2.4rem,3.4vw,3.4rem);             /* Zahl-Kacheln — lh 1 */
  --text-body-lg:1.1rem;
  --text-body:16.5px;                                 /* lh 1.64 */
  --text-body-sm:.95rem;
  --text-quote:1.3rem;                                /* Public Sans kursiv */
  --text-eyebrow:.74rem;                              /* mono, ls .22em, uppercase */
  --text-label:.7rem;                                 /* mono, ls .18-.2em, uppercase */
  --text-source:.68rem;                               /* mono, Quellenangaben */

  /* ── Raster, Abstände, Bewegung ─────────────────────────────────────────────────────
     Vorlage: design-system/tokens/spacing.css */
  --container-max:1300px;
  --gutter:clamp(20px,4.5vw,64px);
  --section-pad:clamp(72px,10vw,128px);
  --card-pad:clamp(24px,2.4vw,36px);
  --card-pad-sm:clamp(22px,2.2vw,30px);
  --card-gap:clamp(16px,2vw,24px);
  --tile-gap:3px;                     /* Kachel-Raster: 3px Fugen + 1px Outline */
  --radius-none:0;                    /* Karten/Kacheln sind IMMER eckig */
  --radius-pill:999px;                /* nur Buttons */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:.35s; --dur-mid:.45s; --dur-reveal:.8s; --dur-img:.9s;

  /* ── Befundzustände — Ergänzung dieses Pakets, nicht aus der Vorlage ────────────────
     Herkunft der Werte: die Anwendungsentwürfe (`docs/design/claude-design/05-uebersicht.dc.html`,
     dort `--offen`/`--ungepr`/`--erfuellt`). Sie tragen die Regel aus dem Dashboard-Konzept:
     „Ungeprüftes darf nie beruhigender aussehen als Offenes" — deshalb hat `ungeprueft`
     zusätzlich eine EIGENE FORM (hohle bzw. schraffierte Blase), nicht nur eine andere Farbe.
     Farbe allein trägt die Aussage nie (WCAG 1.4.1).

     ABWEICHUNG VOM ENTWURF, GEMESSEN: der Entwurf führt `--ungepr:#8A6410`. Auf
     `--surface-tint` (#DBE8F1) ergibt das **4,30:1** — unter AA, und genau dort liegen nach
     der Platzhalter-Regel die getönten Flächen. Korrigiert auf #7D5A0C: **5,04:1** auf tint,
     5,40 auf raised, 5,76 auf page. Nicht zurückdrehen, ohne neu zu messen.
     Wächter: `klammer/tests/test_werkbund_fundament.py::test_zustandsfarben_erreichen_aa`. */
  --status-offen:#9B2C1F;
  --status-ungeprueft:#7D5A0C;
  --status-erfuellt:#2E6248;

  /* ── Bühnenfläche — Ergänzung dieses Pakets, nicht aus der Vorlage ──────────────────
     Der Grund unter den angemeldeten Vorstufen (Aktivierung, Anmeldung): dunkel in BEIDEN
     Themenmodi, mit einer hellen Karte darauf.

     Warum nicht `--surface-hero`: das ist die Vorlage-Rolle für den Hero-Raum und im
     Dunkelmodus nicht überschrieben — sie bleibt dort auf #101214 und wäre damit identisch
     mit `--surface-page`. Die Karte verlöre ihren Grund, die Komposition fiele flach.
     Gemessen im Browser, Beleg `docs/design/klammer-schale/belege/`.

     Eine Vorlage-Rolle im Dunkelmodus still umzudeuten wäre genau der Drift, den dieses Paket
     verhindert. Deshalb ein eigener Name — der Entwurf 02 vertieft an dieser Stelle ebenso
     (dort `--hero:#0B0D0F`). */
  --surface-buehne:#101214;

  /* ── Produkt-Typoskala — Ergänzung dieses Pakets, nicht aus der Vorlage ─────────────
     Die Vorlage ist für eine Landingpage gebaut: `--text-hero`, `--text-h2` und `--text-stat`
     sind `clamp()`-Größen, die mit dem Ansichtsfenster mitwachsen. In einer Produktoberfläche
     ist das falsch — Nutzer arbeiten bei fester Auflösung, und eine Überschrift, die in einer
     schmalen Spalte schrumpft, sieht nicht besser aus, sondern kleiner.

     Deshalb hier eine FESTE Staffel im Verhältnis ~1,15–1,2 für alles, was Bedienoberfläche
     ist: Tabellen, Formulare, Kacheln, Seitentitel. Die Vorlagegrößen bleiben unverändert
     gültig für werbliche Flächen (Landingpage, Preisseite).

     Fließtext in der Oberfläche benutzt weiter `--text-body` (16,5px) aus der Vorlage —
     dafür braucht es keinen zweiten Wert. */
  --ui-micro:.6875rem;    /* 11px — Rubriken und Mikro-Labels, mono, Versalien */
  --ui-sm:.8125rem;       /* 13px — Sekundärtext, dichte Tabellenzellen */
  --ui-md:.9375rem;       /* 15px — Bedienelemente, Formularfelder, Tabellen */
  --ui-title-sm:1.25rem;  /* 20px — Abschnittstitel */
  --ui-title:1.5rem;      /* 24px — Kartentitel */
  --ui-page-title:1.75rem;/* 28px — Seitentitel */
  --ui-line:1.5;          /* Zeilenhöhe der Oberfläche; 1.64 bleibt dem Fließtext */

  /* ── Stapelordnung — Ergänzung dieses Pakets, nicht aus der Vorlage ─────────────────
     Benannte Ebenen statt gewürfelter Zahlen. 50 ist bewusst der Wert, den `werkbund.css`
     der Kopfzeile bereits gibt — die Ordnung beschreibt den Bestand, sie erfindet ihn nicht. */
  --z-sticky:50;
  --z-dropdown:100;
  --z-overlay:200;
  --z-dialog:300;
  --z-toast:400;
}

[data-theme="dark"] {
  /* Vorlage: design-system/tokens/colors.css */
  --surface-page:#101214; --surface-raised:#16181B; --surface-tint:#1A2430;
  --surface-brand:#2A4A6A; --surface-brand-deep:#223D58;
  --text-primary:#EDEEF0; --text-secondary:rgba(237,238,240,.82); --text-muted:rgba(237,238,240,.64);
  --accent:#93B7DD; --accent-hover:#B4CEE9;
  --border-hairline:rgba(237,238,240,.14); --border-strong:rgba(237,238,240,.55);
  --btn-bg:#96BCE2; --btn-fg:#0E1D2E; --btn-bg-hover:#BCD8F0; --btn-ring:rgba(150,188,226,.3);
  --accent-brass:var(--brass-300); --btn-hero-bg:var(--brass-200); --btn-hero-fg:#17191C;
  --focus-ring:#93B7DD;

  /* Befundzustände — Ergänzung dieses Pakets (Herkunft s. o.) */
  --status-offen:#E08C74;
  --status-ungeprueft:#DCB05A;
  --status-erfuellt:#83C4A3;

  /* Die Bühne geht tiefer als die Seitenfläche, damit die Karte einen Grund behält. */
  --surface-buehne:#0B0D0F;
}