/* ==========================================================================
   Design-Tokens – Ingenieurbüro Zeller
   --------------------------------------------------------------------------
   Spiegel von web/design-system/tokens/ aus dem claude.ai-Design-Projekt
   „Zeller Baubiologie Design System" (7ad34d62-6e87-4052-a559-540cdd545e6a).

   Zusammengeführt aus colors.css, typography.css, shape.css, spacing.css und
   motion.css. Der dortige @import auf fonts.googleapis.com entfällt bewusst –
   die Schriften liegen lokal in assets/fonts/ (siehe tools/fetch-fonts.py).

   Werte hier NICHT einzeln ändern. Änderungen gehören ins Design-Projekt und
   werden von dort übernommen, sonst laufen Website und Design auseinander.
   ========================================================================== */

:root {

  /* --- Basis: Tanne (primär – Gutachten, Ruhe, Verlässlichkeit) ---------- */
  --forest-900:#10201C; --forest-800:#16302A; --forest-700:#1E4038; --forest-600:#2A5349;
  --forest-500:#37665A; --forest-400:#5C877C; --forest-300:#92AEA6; --forest-200:#C0D2CC;
  --forest-100:#DCE7E3; --forest-50:#EEF3F1;

  /* --- Basis: Stahlblau (Akzent – Fachlichkeit, Kontakt, Fokus) ---------- */
  --steel-700:#1F4359; --steel-600:#2A5170; --steel-500:#2E5C7A; --steel-300:#7FA3B8;
  --steel-200:#C3D6E1; --steel-50:#EDF3F7;

  /* --- Basis: Sand (Papier, Flächen) ------------------------------------ */
  --sand-50:#FCFCFB; --sand-100:#F4F5F3; --sand-200:#E7E9E6;

  /* --- Basis: Stein (Neutrale) ------------------------------------------ */
  --stone-900:#121615; --stone-800:#1F2523; --stone-700:#3A423C; --stone-600:#525B54;
  --stone-500:#6B746D; --stone-400:#949C95; --stone-300:#C3C8C2; --stone-200:#DFE2DD;
  --stone-100:#EFF1EE; --stone-0:#FFFFFF;

  /* --- Messsignale (Bewertungsstufen nach SBM-2015) ---------------------- */
  --signal-none:#37665A;    /* keine Anomalie   */
  --signal-weak:#B08A2E;    /* schwache Anomalie */
  --signal-strong:#A85C2E;  /* starke Anomalie   */
  --signal-extreme:#8E332A; /* extreme Anomalie  */
  --signal-info:#2E5C7A;

  /* Textsichere Varianten der Signalfarben.
     Die Signalfarben oben sind fuer Flaechen und Linien gedacht; dort
     genuegen nach WCAG 3:1. Als Textfarbe erreichen „schwach" nur 2,87:1
     und „stark" nur 4,42:1 auf den hellen Flaechen – zu wenig fuer die
     geforderten 4,5:1. Diese abgedunkelten Varianten behalten den Farbton
     und erreichen 4,6:1 bis 7,1:1. Verwendet werden sie ausschliesslich
     dort, wo die Signalfarbe Text einfaerbt. */
  --signal-none-text:#37665A;
  --signal-weak-text:#836722;
  --signal-strong-text:#9C562B;
  --signal-extreme-text:#8E332A;

  /* Deckende Flaechen fuer die Bewertungs-Plaketten.
     Vorher waren das halbtransparente Toenungen. Deren Kontrast haengt
     davon ab, was darunter liegt: dieselbe Plakette erreichte auf weissem
     Grund 4,3:1 und in einer Tabellenkopfzeile nur noch 3,9:1. Deckende
     Werte sind berechenbar – diese vier sind die frueheren Toenungen ueber
     Weiss, nur eben festgeschrieben. */
  --badge-none-bg:#E7EDEB;
  --badge-weak-bg:#F4EFE2;
  --badge-strong-bg:#F3E8E2;
  --badge-extreme-bg:#EFE2E1;

  /* --- Semantisch: Text -------------------------------------------------- */
  --text-strong:var(--stone-900);
  --text-body:var(--stone-700);

  /* ABWEICHUNG VOM DESIGN-PROJEKT – bitte dort nachziehen.
     Im Design-System ist --text-muted auf --stone-500 (#6B746D) gesetzt.
     Gemessen ergibt das auf den hellen Flaechen nur 4,31:1 (auf --forest-50)
     bis 4,42:1 (auf --sand-100). WCAG 2.1 AA verlangt fuer normalen Text
     4,5:1. Betroffen sind Tabellenkoepfe, Eyebrows und alle Labels, also
     sehr viele Stellen.
     --stone-600 (#525B54) erreicht 5,9:1 bzw. 6,1:1 und bleibt optisch
     zurueckhaltend. Quelle der Messung: Lighthouse-Bericht vom 18.10.2026,
     dist/lighthouse-mobil.json, Pruefung „color-contrast".
     Solange das Design-Projekt nicht nachgezogen hat, ueberschreibt der
     naechste DesignSync diese Zeile. */
  --text-muted:var(--stone-600);
  --text-invert:var(--sand-50);
  --text-accent:var(--forest-600);
  --text-link:var(--forest-600);
  --text-link-hover:var(--steel-600);

  /* --- Semantisch: Flächen ----------------------------------------------- */
  --surface-page:var(--stone-0);
  --surface-card:var(--stone-0);
  --surface-sunken:var(--sand-50);
  --surface-muted:var(--forest-50);
  --surface-inverse:var(--forest-900);
  --surface-accent:var(--forest-500);
  --surface-accent-soft:var(--forest-100);

  /* --- Semantisch: Linien ------------------------------------------------ */
  --border-subtle:var(--stone-200);
  --border-default:var(--stone-300);
  --border-strong:var(--stone-700);
  --border-accent:var(--forest-500);

  /* --- Semantisch: Interaktion ------------------------------------------- */
  --action-primary:var(--forest-600);
  --action-primary-hover:var(--forest-700);
  --action-primary-active:var(--forest-800);
  --action-accent:var(--steel-500);
  --action-accent-hover:var(--steel-600);
  --focus-ring:var(--steel-500);
  --disabled-fg:var(--stone-400);
  --disabled-bg:var(--stone-100);

  /* --- Schrift ------------------------------------------------------------ */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* --- Schriftgrößen ------------------------------------------------------ */
  --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:62px;

  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.55; --leading-loose:1.7;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.12em;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* --- Typografische Rollen ----------------------------------------------- */
  --type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-3xl)/1.12 var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-2xl)/1.2 var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-lg)/1.3 var(--font-display);
  --type-body:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-medium) var(--text-xs)/1.3 var(--font-body);
  --type-eyebrow:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-mono);
  --type-data:var(--weight-medium) var(--text-xl)/1.1 var(--font-mono);
  --type-unit:var(--weight-regular) var(--text-xs)/1.2 var(--font-mono);

  /* --- Form ---------------------------------------------------------------- */
  --radius-none:0px; --radius-xs:2px; --radius-sm:4px; --radius-md:6px;
  --radius-lg:10px; --radius-xl:16px; --radius-pill:999px;

  --border-width:1px; --border-width-strong:2px; --rule-accent:3px;

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(19,22,20,.06);
  --shadow-sm:0 1px 3px rgba(19,22,20,.08),0 1px 1px rgba(19,22,20,.04);
  --shadow-md:0 4px 12px rgba(19,22,20,.09);
  --shadow-lg:0 12px 32px rgba(19,22,20,.12);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring-focus:0 0 0 3px rgba(46,92,122,.28);

  --overlay-scrim:rgba(16,32,28,.58);
  --blur-glass:saturate(140%) blur(10px);

  /* --- Abstände ------------------------------------------------------------ */
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  --gutter-page:24px;
  --container-max:1180px;
  --container-prose:68ch;
  --section-y:96px;
  --section-y-tight:56px;

  /* --- Bewegung ------------------------------------------------------------ */
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(0,.6,.3,1);
  --ease-in:cubic-bezier(.5,0,1,.5);
  --transition-control:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

/* Auf kleinen Viewports werden die großen Schriftgrade und die Sektionshöhe
   zurückgenommen. Das Original-Tokenset kennt nur Desktop-Werte – diese
   Staffelung ist die Ergänzung für die Website. */
@media (max-width: 860px) {
  :root {
    --text-5xl:40px; --text-4xl:34px; --text-3xl:28px; --text-2xl:23px; --text-xl:20px;
    --section-y:56px;
    --section-y-tight:40px;
    --gutter-page:20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms;
  }
}