/* =============================================================================
   xrechnung-tools — Design-Tokens
   Quelle: cd-handbuch-xrechnung-tools.html (:root-Block). Stand 12.09.2026, Fassung 0.1.
   Ins Theme kopieren: themes/10_xrechnung/assets/css/tokens.css
   Regel: --xr-* sind Markenwerte. Komponenten greifen auf Rollen zu (--link,
   --surface …), nie direkt auf --xr-blue — Ausnahme sind die Statusfarben.
   ============================================================================= */
:root {
  /* --- Palette --------------------------------------------------------- */
  --xr-ink:          #1E2A38;   /* Schrift; Fläche nur Footer und dunkler Code */
  --xr-paper:        #FAF7F2;   /* Grundfläche der Seite */
  --xr-paper-deep:   #F0EBE3;   /* leise Flächen, heller Code, Tabellenkopf */
  --xr-white:        #FFFFFF;   /* nur innen: Karten, Tabellen, Ablagefläche */
  --xr-rule:         #D8D1C7;   /* Haarlinien, Rahmen; trägt nie Text */
  --xr-muted:        #5F6B78;   /* Nebentext, Beschriftungen (AA auf Papier) */
  --xr-blue:         #2A5DA8;   /* alles Klickbare: Links, Primärbutton, Fokus */
  --xr-blue-deep:    #1E4680;   /* Hover/Aktiv von Blau */
  --xr-copper:       #C9692A;   /* Akzent — nie Fließtext (3,5:1) */
  --xr-copper-deep:  #9E4F1B;   /* Kupfer als Textfarbe: Topline, Akzentwort */
  --xr-ok:           #276B45;   --xr-ok-bg:   #DCEFE3;
  --xr-warn:         #8A5E0B;   --xr-warn-bg: #F6E7BF;
  --xr-err:          #B5322A;   --xr-err-bg:  #F7DEDA;
  --xr-info-bg:      #DDE7F5;
  /* auf Tinte */
  --xr-on-inverse-link:   #9FC0EC;
  --xr-on-inverse-copper: #E8A06A;
  --xr-on-inverse-muted:  #A7B1BD;

  /* --- Rollen ---------------------------------------------------------- */
  --surface:         var(--xr-paper);
  --surface-muted:   var(--xr-paper-deep);
  --surface-inner:   var(--xr-white);
  --surface-inverse: var(--xr-ink);
  --text:            var(--xr-ink);
  --text-muted:      var(--xr-muted);
  --text-on-inverse: var(--xr-paper);
  --link:            var(--xr-blue);
  --link-hover:      var(--xr-blue-deep);
  --accent:          var(--xr-copper);
  --accent-text:     var(--xr-copper-deep);
  --border:          var(--xr-rule);
  --border-strong:   var(--xr-ink);
  --focus:           var(--xr-blue);

  /* --- Typografie ------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: 44px; --text-display-lh: 1.1;
  --text-h2: 30px;      --text-h2-lh: 1.2;
  --text-h3: 22px;      --text-h3-lh: 1.3;
  --text-lead: 20px;    --text-lead-lh: 1.5;
  --text-body: 17px;    --text-body-lh: 1.6;
  --text-small: 14px;   --text-small-lh: 1.5;
  --text-mono: 15px;    --text-mono-lh: 1.55;
  --text-topline: 13px; --text-topline-ls: .12em;
  --weight-regular: 400; --weight-semibold: 600;

  /* --- Raster & Abstände (Basis 8) ------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;
  --page-margin: 20px;
  --block-gap:   var(--space-4);
  --section-gap: var(--space-6);
  --grid-gap:    16px;
  --measure:     42rem;
  --content-max: 72rem;

  /* --- Kanten ---------------------------------------------------------- */
  --radius:      4px;
  --radius-mark: 6px;
  --rule:        1px;
  --rule-strong: 2px;
  --rule-status: 3px;

  /* --- Bewegung -------------------------------------------------------- */
  --dur-control: 150ms;
  --dur-panel:   250ms;
  --ease:        cubic-bezier(.2,.7,.2,1);

  /* --- Breakpoints (nur Doku — CSS kann Variablen in Media Queries nicht lesen) */
  /* 640 · 960 · 1280 */
}
@media (min-width: 640px) {
  :root { --page-margin: 32px; --grid-gap: 24px; --section-gap: var(--space-7); }
}
@media (min-width: 960px) {
  :root { --page-margin: 48px; --block-gap: var(--space-5); --section-gap: var(--space-8); }
}
@media (max-width: 639px) {
  :root {
    --text-display: 32px; --text-h2: 26px; --text-h3: 20px;
    --text-lead: 18px;    --text-body: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-control: 0ms; --dur-panel: 0ms; }
}