/**
 * Design-Tokens — die einzige Quelle für Farbe, Typografie, Radien,
 * Erhebung und Abstände.
 *
 * Regel: In allen anderen Stylesheets keine harten Farb-, Radius- oder
 * Abstandswerte mehr. Wer einen neuen Wert braucht, ergänzt hier eine Stufe.
 *
 * @package MDBetriebsratPremium
 */

:root {
  /* --- Farbe: je Farbe genau eine Aufgabe ------------------------------- */
  --c-navy:        #0b2a5b;  /* Flächen, Footer, Hero          */
  --c-navy-deep:   #061a39;  /* dunkles Ende der Verläufe      */
  --c-blue:        #1f5fe0;  /* Links, Buttons, Fokus          */
  --c-blue-hover:  #1750c4;
  --c-blue-soft:   #e6eeff;
  --c-signal:      #d2232a;  /* NUR Dringlichkeit              */
  --c-signal-soft: #fdeaeb;
  --c-good:        #0d7a56;  /* Ersparnis, Erfolg              */
  --c-good-soft:   #e4f5ee;
  --c-ink:         #0e1a2b;  /* Fließtext                      */
  --c-muted:       #5b6b84;  /* Sekundärtext                   */
  --c-line:        #dbe3ef;  /* Trenner, Rahmen                */
  --c-line-soft:   #eaeff7;
  --c-ground:      #f2f5fa;  /* Seitenhintergrund              */
  --c-paper:       #ffffff;

  /* --- Kategorien der Fondsleistungen -----------------------------------
     Hier kodiert Farbe echte Information (die Leistungsart), anders als bei
     Pillen, die früher nach Rasterposition eingefärbt waren. Die Vordergrund-
     töne sind gegenüber dem ersten Entwurf abgedunkelt: Sie erreichen auf
     ihrem jeweiligen hellen Grund mindestens 4.5:1 und sind damit auch als
     11-px-Etikett lesbar (vorher etwa Bernstein: 2.3:1). */
  --cat-family:      #c01c4a;  --cat-family-bg:      #ffedf2;
  --cat-anniversary: #8a5a00;  --cat-anniversary-bg: #fff3d5;
  --cat-pension:     #06657f;  --cat-pension-bg:     #e4f8ff;
  --cat-events:      #6127b8;  --cat-events-bg:      #f1e9ff;
  --cat-general:     #1f5fe0;  --cat-general-bg:     #e8f3ff;
  --cat-other:       #0d7a56;  --cat-other-bg:       #e6f8f0;
  --cat-neutral:     #5b6b84;  --cat-neutral-bg:     #eef2f7;

  /* --- Typografie: sechs Stufen, keine weiteren -------------------------- */
  --t-display-1: clamp(40px, 5vw, 60px);
  --t-display-2: clamp(26px, 3vw, 34px);
  --t-heading:   20px;
  --t-body:      17px;
  --t-small:     15px;
  --t-label:     12px;

  --f-sans:    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-display: "Inter Tight", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Radius: drei Stufen ---------------------------------------------- */
  --r-sm:  6px;   /* Pills, Badges, Eingabefelder */
  --r-md: 10px;   /* Karten, Buttons              */
  --r-lg: 16px;   /* Sektionen, Hero              */

  /* --- Erhebung: zweilagig statt einer weichen Wolke --------------------- */
  --e-rest: 0 1px 2px rgba(11, 42, 91, .06);
  --e-card: 0 1px 2px rgba(11, 42, 91, .06), 0 8px 20px rgba(11, 42, 91, .07);
  --e-lift: 0 2px 4px rgba(11, 42, 91, .08), 0 18px 38px rgba(11, 42, 91, .13);

  /* --- Abstand: 4er-Raster ---------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;

  /* --- Satzspiegel ------------------------------------------------------- */
  --mdbr-shell: min(1360px, calc(100% - 48px));
  --mdbr-shell-max: 1360px;
}

@media (max-width: 920px) {
  :root {
    --mdbr-shell: min(100% - 32px, 1360px);
    --s-5: 28px;
    --s-6: 44px;
  }
}