/* ============================================================
   Meadow — Tokens
   1:1 aus Meadow.dc.html, renderVals() (c / a / Radien / Motion).
   Dark Mode:  <html data-mw-theme="dark">   (gesetzt vom Boot-Skript in index.html)

   Diese Datei enthaelt ausschliesslich :root-Bloecke, @font-face und Keyframes.
   Keine Komponenten-Selektoren.
   ============================================================ */

/* ── Schriften ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ── Typografie ───────────────────────────────────────────── */
  --mw-font-sans:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mw-font-display: 'Barlow Condensed', 'Barlow', 'Segoe UI', sans-serif;
  --mw-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Akzente (themenunabhaengig, `a`-Objekt) ──────────────── */
  --mw-primary:      #2C7DA0;
  --mw-primary-dark: #1f5f7d;
  --mw-teal:         #619B98;
  --mw-teal-dark:    #4d817e;
  --mw-sage:         #8DC2B0;
  --mw-blue:         #60ADC9;
  --mw-navy:         #002f52;
  --mw-navy-active:  #0f4f7b;
  --mw-success:      #1a8f4a;
  --mw-warning:      #b5730a;
  --mw-danger:       #d02418;

  /* rgb-Tripel — nur fuer rgba()-Ableitungen und MudBlazors --*-rgb */
  --mw-primary-rgb: 44, 125, 160;
  --mw-teal-rgb:    97, 155, 152;
  --mw-sage-rgb:    141, 194, 176;
  --mw-blue-rgb:    96, 173, 201;
  --mw-success-rgb: 26, 143, 74;
  --mw-warning-rgb: 181, 115, 10;
  --mw-danger-rgb:  208, 36, 24;

  /* ── Flaechen: HELL (`c`-Objekt) ──────────────────────────── */
  --mw-canvas: #e7ecea;
  --mw-bg:     #f2f5f4;
  --mw-panel:  #ffffff;
  --mw-text:   #39423f;
  --mw-muted:  #6c7b78;
  --mw-border: #e6ecea;
  --mw-tint:   #eef5f3;
  --mw-header: #ffffff;
  --mw-shadow-card: 0 1px 4px rgba(20, 40, 38, .10);

  /* ── Themenabhaengige Akzent-Ableitungen ──────────────────── */
  /* soft-fg trifft st.pill / fchip(on) / fbtn(active) / legBandage.
     NICHT verwechseln mit --mw-danger, das tinyBtnDanger + dayChip immer nutzen. */
  --mw-soft:        #e3f0f5;
  --mw-soft-fg:     #1f5f7d;
  --mw-block-bg:    #e3f2e9;
  --mw-block-fg:    #2c6b47;
  --mw-neg-bg:      #fdeceb;
  --mw-neg-fg:      #d02418;
  --mw-hoof-idle:   #c6d4d0;

  /* ── Serienfarben (Kuchendiagramme) ───────────────────────── */
  /* Sechs Kategorien in fester Reihenfolge, danach faellt der Rest in
     "Weitere" (--mw-series-other).

     NICHT aus den Markenfarben gebaut: primary, teal, sage und blue liegen
     alle im selben Blaugruen und waeren als Tortenstuecke nebeneinander
     nicht zu unterscheiden - bei einer Rot-Gruen-Schwaeche erst recht nicht.
     Diese sechs Toene sind gegen beide Flaechen geprueft (hell #ffffff,
     dunkel #262930): schlechtestes benachbartes Paar Delta E 9.1 hell / 8.4
     dunkel bei simulierter Farbfehlsichtigkeit, 19.6 / 19.3 bei normalem
     Sehen.

     Drei davon stehen unter 3:1 zur hellen Flaeche. Das ist hier in Ordnung,
     weil neben jedem Stueck seine Beschriftung UND seine Zahl steht - die
     Farbe traegt die Auskunft nie allein.

     Dunkel sind es dieselben sechs Farbtoene, nur fuer die dunkle Flaeche
     nachgezogen - kein zweites Farbschema. */
  --mw-series-1:     #2a78d6;
  --mw-series-2:     #eb6834;
  --mw-series-3:     #1baf7a;
  --mw-series-4:     #eda100;
  --mw-series-5:     #e87ba4;
  --mw-series-6:     #008300;
  /* Der Rest ist keine Kategorie und bekommt deshalb keinen Farbton. */
  --mw-series-other: var(--mw-muted);

  /* ── Pegelfarbe (Klauen und Euterviertel) ─────────────────── */
  /* Der gefuellte Teil eines Umrisses; leer ist --mw-hoof-idle.
     Bewusst ein eigenes Token und NICHT --mw-primary: dunkel muss die
     Fuellung HELLER sein als der leere Umriss, hell dunkler - eine Farbe,
     die in beiden Themes dieselbe waere, drehte beim Umschalten ihre
     Lesbarkeit um. #2C7DA0 auf dem dunklen Panel gegen #41504d sind keine
     2:1, der Pegelstand waere dort kaum zu sehen.

     Hier stand bis zuletzt eine vierstufige Rampe. Die ist mit dem
     Fuellstand entfallen: zwei benachbarte Blautoene sind nebeneinander
     nicht zu unterscheiden, eine Fuellhoehe schon. */
  --mw-level-fill:  #2C7DA0;   /* = --mw-primary */

  /* ── Backdrops ────────────────────────────────────────────── */
  --mw-backdrop-drawer: rgba(8, 20, 24, .42);
  --mw-backdrop-dialog: rgba(6, 18, 22, .5);

  /* ── Elevation ────────────────────────────────────────────── */
  --mw-shadow-drawer:  6px 0 30px rgba(0, 0, 0, .3);
  --mw-shadow-pop:     0 20px 48px rgba(0, 0, 0, .22);
  --mw-shadow-menu:    0 20px 48px rgba(0, 0, 0, .26);
  --mw-shadow-addmenu: 0 22px 50px rgba(0, 0, 0, .3);
  --mw-shadow-dialog:  0 32px 96px rgba(0, 0, 0, .34), 0 4px 20px rgba(0, 0, 0, .14);
  --mw-shadow-sheet:   0 -14px 44px rgba(0, 0, 0, .34);
  --mw-glow-primary:   0 4px 14px rgba(var(--mw-primary-rgb), .27);
  --mw-glow-teal:      0 4px 14px rgba(var(--mw-teal-rgb), .27);
  --mw-glow-btn:       0 3px 10px rgba(var(--mw-primary-rgb), .27);
  --mw-glow-fab:       0 8px 20px rgba(var(--mw-primary-rgb), .4);

  /* ── Radien (die im Prototyp tatsaechlich vorkommenden) ───── */
  --mw-r-xs:  5px;
  --mw-r-sm:  6px;
  --mw-r-md:  7px;
  --mw-r-lg:  8px;
  --mw-r-xl:  9px;
  --mw-r-2xl: 11px;
  --mw-r-3xl: 12px;
  --mw-r-4xl: 13px;
  --mw-r-5xl: 16px;
  --mw-r-6xl: 22px;
  --mw-r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────── */
  --mw-ease:      cubic-bezier(.16, 1, .3, 1);
  --mw-t-fast:    .12s;
  --mw-t:         .15s;
  --mw-t-pop:     .18s;
  --mw-t-slide:   .22s;
  --mw-t-dialog:  .22s;
  --mw-t-sheet:   .3s;

  /* ── Layout ───────────────────────────────────────────────── */
  --mw-shell-max:     1260px;
  --mw-header-h:      60px;
  --mw-header-h-m:    52px;
  --mw-drawer-w:      284px;
  --mw-drawer-w-m:    252px;
  /* Hoehe der Bedienelemente in der Toolbar. Suche und Buttons standen
     bisher auf 40 gegen 42px, weil beide ihre Hoehe nur aus Padding und
     Inhalt bezogen. Ein gemeinsamer Wert haelt sie zusammen. */
  --mw-control-h:     40px;
  --mw-control-h-m:   42px;
  --mw-content-pad:   26px;
  --mw-content-pad-m: 16px;
  --mw-tabbar-h:      66px;
  --mw-fab:           54px;
  --mw-bars-h:        150px;
  --mw-sheet-max:     560px;

  /* ── z-Ebenen (Meadow-eigene; Dialoge nutzen Muds Stapel) ─── */
  --mw-z-header:          20;
  --mw-z-tabbar:          1090;
  --mw-z-fab:             1091;
  --mw-z-menu-backdrop:   1097;
  --mw-z-menu:            1098;
  --mw-z-drawer-backdrop: 1099;
  --mw-z-drawer:          1100;
  --mw-z-filter-backdrop: 90;
  --mw-z-filter:          91;
  /* Mobil wird der Filter ein Bottom-Sheet und muss damit ueber Tabbar (1090)
     und FAB (1091) liegen - mit 90/91 wuerde er dahinter verschwinden. Unter dem
     Add-Menue (1097), damit dessen Auswahl weiterhin obenauf liegt. */
  --mw-z-sheet-backdrop:  1094;
  --mw-z-sheet:           1095;
}

/* ── Flaechen: DUNKEL ───────────────────────────────────────── */
:root[data-mw-theme="dark"] {
  --mw-canvas: #14171b;
  --mw-bg:     #1b1e23;
  --mw-panel:  #262930;
  --mw-text:   #eef2f1;
  --mw-muted:  #98a3a0;
  --mw-border: #343841;
  --mw-tint:   #2f333b;
  --mw-header: #22252b;
  --mw-shadow-card: 0 2px 12px rgba(0, 0, 0, .5);

  --mw-soft:      #16303a;
  --mw-soft-fg:   #60ADC9;
  --mw-block-bg:  #2c3a2f;
  --mw-block-fg:  #8DC2B0;
  --mw-neg-bg:    #3a2726;
  --mw-neg-fg:    #f0a29c;
  --mw-hoof-idle: #41504d;

  /* Dieselben sechs Farbtoene, fuer die dunkle Flaeche nachgezogen - siehe
     den hellen Block. --mw-series-other zeigt auf --mw-muted und folgt dem
     Theme von selbst. */
  --mw-series-1:  #3987e5;
  --mw-series-2:  #d95926;
  --mw-series-3:  #199e70;
  --mw-series-4:  #c98500;
  --mw-series-5:  #d55181;
  --mw-series-6:  #008300;

  /* Heller als der leere Umriss - siehe die Begruendung im hellen Block. */
  --mw-level-fill: #60ADC9;   /* = --mw-blue */
}

/* ── Keyframes (Prototyp Zeilen 23-27) ──────────────────────── */
@keyframes mwFade    { from { opacity: 0; }                                          to { opacity: 1; } }
@keyframes mwPop     { from { opacity: 0; transform: translateY(12px) scale(.985); }  to { opacity: 1; transform: none; } }
@keyframes mwSlide   { from { transform: translateX(-100%); }                         to { transform: translateX(0); } }
@keyframes mwSheetUp { from { transform: translateY(100%); }                          to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}