/*
 * MSB Design Tokens – Matthäus Schmid Bauunternehmen (perfekt-bauen.de)
 * Version 1.2 – Quelle: https://www.perfekt-bauen.de (Stand 2026-10-14), ergänzt um App-Tokens.
 * Einbinden: <link rel="stylesheet" href=".../tokens.css"> oder in den Build kopieren.
 * Namensregel: --msb-<kategorie>-<name>[-<stufe>]
 */
:root {
  /* ---------- Farben: Marke ---------- */
  --msb-color-brand:        #00874d; /* Primär-Grün, Logo, Primär-Buttons */
  --msb-color-brand-dark:   #0a3a2d; /* Hover, dunkle Flächen, Footer */
  --msb-color-brand-light:  #4dcb62; /* Akzent auf dunklem Grund, Highlights */
  --msb-color-brand-tint:   #28e070; /* Akzent auf dunklem Grund, sparsam */

  /* ---------- Farben: Neutral ---------- */
  --msb-color-black:        #2c2c2c; /* Fließtext (Brand-Schwarz) */
  --msb-color-white:        #ffffff;
  --msb-color-offwhite:     #f5f5f5; /* Seitenhintergrund, Zebra-Zeilen */
  --msb-color-light-gray:   #eaedf1; /* Flächen, Karten-Hintergrund */
  --msb-color-mid-gray:     #aaaaaa; /* Rahmen, Trennlinien, Platzhalter */
  --msb-color-gray:         #888888; /* Icons sekundär, deaktiviert */
  --msb-color-gray-50:  #f2f2f2;
  --msb-color-gray-100: #e5e5e5;
  --msb-color-gray-150: #d9d9d9;
  --msb-color-gray-200: #cccccc;
  --msb-color-gray-300: #b3b3b3;
  --msb-color-gray-400: #999999;
  --msb-color-gray-500: #808080;
  --msb-color-gray-600: #666666; /* kleinste zulässige Textfarbe auf Weiß (AA) */
  --msb-color-gray-700: #4c4c4c;
  --msb-color-gray-800: #333333;
  --msb-color-gray-900: #1a1a1a;

  /* ---------- Farben: Semantik (App-Ergänzung, nicht von der Website) ---------- */
  --msb-color-success:      #00874d; /* = Brand */
  --msb-color-success-bg:   #e6f3ed;
  --msb-color-warning:      #b25e00;
  --msb-color-warning-bg:   #fff4e5;
  --msb-color-danger:       #b3261e;
  --msb-color-danger-bg:    #fdecea;
  --msb-color-info:         #1f5f8b;
  --msb-color-info-bg:      #e8f1f8;
  --msb-color-focus:        #00bbff; /* Fokusring, wie Website-Slider */

  /* ---------- Rollen ---------- */
  --msb-text:               var(--msb-color-black);
  --msb-text-muted:         var(--msb-color-gray-600);
  --msb-text-inverted:      var(--msb-color-white);
  --msb-bg:                 var(--msb-color-white);
  --msb-bg-subtle:          var(--msb-color-offwhite);
  --msb-bg-surface:         var(--msb-color-light-gray);
  --msb-border:             2px solid var(--msb-color-gray-300);
  --msb-border-color:       var(--msb-color-gray-300);
  --msb-border-color-soft:  var(--msb-color-gray-150);
  --msb-link:               var(--msb-color-brand);
  --msb-link-hover:         var(--msb-color-brand-dark);

  /* ---------- Typografie ----------
   * Hausschrift für Anwendungen: Barlow (selbst gehostet, OFL), siehe fonts/fonts.css.
   * fonts/fonts.css VOR dieser Datei einbinden. Keine externen Font-Dienste. */
  --msb-font-family:        "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --msb-font-family-condensed: "Barlow Semi Condensed", "Arial Narrow", var(--msb-font-family);
  --msb-font-family-mono:   ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --msb-font-weight-light:  300;
  --msb-font-weight-normal: 400;
  --msb-font-weight-bold:   700;
  --msb-font-weight-super:  800;
  --msb-line-height-tight:  1.1;  /* Überschriften */
  --msb-line-height:        1.5;  /* Fließtext */
  --msb-letter-spacing-display: -0.015em;
  --msb-letter-spacing-caps:    0.1em; /* Versal-Labels */

  /* Schriftgrößen Anwendung (Dashboards, Formulare, Tabellen) */
  --msb-text-xs:   12px;
  --msb-text-sm:   14px;
  --msb-text-base: 16px;
  --msb-text-lg:   18px;
  --msb-text-xl:   20px;
  --msb-text-2xl:  24px;
  --msb-text-3xl:  32px;
  --msb-text-4xl:  40px;

  /* Schriftgrößen Website/Marketing (zur Referenz) */
  --msb-text-site-h1: 88px;
  --msb-text-site-h2: 72px;
  --msb-text-site-h3: 48px;
  --msb-text-site-h4: 32px;
  --msb-text-site-h5: 24px;
  --msb-text-site-intro: 24px;
  --msb-text-site-body: 20px;

  /* ---------- Abstände (4er-Raster) ---------- */
  --msb-space-1:  4px;
  --msb-space-2:  8px;
  --msb-space-3:  12px;
  --msb-space-4:  16px;
  --msb-space-5:  24px;
  --msb-space-6:  32px;
  --msb-space-7:  48px;
  --msb-space-8:  52px;  /* Website-Stufe xlarge */
  --msb-space-9:  80px;  /* Website-Stufe xxlarge */
  --msb-grid-sm:  10px;  /* Website-Grid */
  --msb-grid:     30px;
  --msb-grid-lg:  60px;
  --msb-grid-xl:  120px;

  /* ---------- Layout ---------- */
  --msb-page-wrap-sm: 1200px;
  --msb-page-wrap:    1320px;
  --msb-page-wrap-lg: 1600px;
  --msb-bp-sm:  800px;   /* Breakpoints wie Website */
  --msb-bp-md:  1200px;
  --msb-bp-lg:  1600px;

  /* ---------- Form ---------- */
  --msb-radius:       0;     /* Marke ist kantig: keine Rundungen */
  --msb-radius-round: 50%;   /* Avatare, Status-Punkte */
  --msb-shadow:       0 1px 2px 0 rgb(0 0 0 / 10%), 0 2px 6px 0 rgb(0 0 0 / 20%);
  --msb-outline:      max(2px, 0.15em) solid var(--msb-color-focus);
  --msb-outline-offset: max(2px, 0.15em);

  /* ---------- Bewegung ---------- */
  --msb-duration-fast: 150ms;
  --msb-duration:      250ms;
  --msb-duration-slow: 350ms;
  --msb-ease:          ease;
  --msb-ease-in-out:   ease-in-out;

  /* ---------- Buttons ---------- */
  --msb-button-pad-block:   12px;
  --msb-button-pad-inline:  32px;
  --msb-button-pad-block-sm:  8px;
  --msb-button-pad-inline-sm: 16px;
  --msb-button-pad-block-lg: 16px;
  --msb-button-pad-inline-lg: 40px;
  --msb-button-outline-width: 2px;
  --msb-control-height: 44px; /* Mindest-Klickfläche */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --msb-duration-fast: 0ms;
    --msb-duration: 0ms;
    --msb-duration-slow: 0ms;
  }
}