/* =====================================================================
   tokens.css – Material Design 3 Design-Tokens (Single Source of Truth)
   Markenfarben PROSPERITA: NUR hier anpassen (Abschnitt "Seed").
   Light = :root, Dark = [data-theme="dark"] bzw. prefers-color-scheme.
   ===================================================================== */

:root {
  /* ---------- Seed / Marke (neutral bis CD-Manual vorliegt) ---------- */
  /* Primär: tiefes Blaugrün – ruhig, vertrauenswürdig, nicht Bank-blau */
  --md-sys-color-primary:                #1F5F5B;
  --md-sys-color-on-primary:             #FFFFFF;
  --md-sys-color-primary-container:      #A9EFE8;
  --md-sys-color-on-primary-container:   #00201E;
  /* Sekundär: warmes Sand/Gold – für Akzente, Eigenanbieter-Markierung */
  --md-sys-color-secondary:              #7A5A2A;
  --md-sys-color-on-secondary:           #FFFFFF;
  --md-sys-color-secondary-container:    #FFDDB3;
  --md-sys-color-on-secondary-container: #2A1800;
  /* Tertiär: gedämpftes Violett – Vergleichslinien */
  --md-sys-color-tertiary:               #5B5B7E;
  --md-sys-color-on-tertiary:            #FFFFFF;
  --md-sys-color-tertiary-container:     #E1DFFF;
  --md-sys-color-on-tertiary-container:  #171837;

  --md-sys-color-error:                  #BA1A1A;
  --md-sys-color-on-error:               #FFFFFF;
  --md-sys-color-error-container:        #FFDAD6;
  --md-sys-color-on-error-container:     #410002;

  /* Semantik (Cockpit): besser / schlechter / neutral / Lücke */
  --mk-color-good:        #2E7D32;
  --mk-color-good-bg:     #E3F3E4;
  --mk-color-bad:         #C62828;
  --mk-color-bad-bg:      #FDE7E7;
  --mk-color-gap:         #8A8A8A;
  --mk-color-gap-bg:      #F1F1F1;
  --mk-color-own:         var(--md-sys-color-secondary);
  --mk-color-own-bg:      var(--md-sys-color-secondary-container);

  /* ---------- Surfaces ---------- */
  --md-sys-color-surface:                     #F7FAF9;
  --md-sys-color-surface-dim:                 #D7DBDA;
  --md-sys-color-surface-bright:              #F7FAF9;
  --md-sys-color-surface-container-lowest:    #FFFFFF;
  --md-sys-color-surface-container-low:       #F1F4F3;
  --md-sys-color-surface-container:           #EBEEED;
  --md-sys-color-surface-container-high:      #E5E9E8;
  --md-sys-color-surface-container-highest:   #E0E3E2;
  --md-sys-color-on-surface:                  #191C1C;
  --md-sys-color-on-surface-variant:          #3F4947;
  --md-sys-color-outline:                     #6F7977;
  --md-sys-color-outline-variant:             #BEC9C6;
  --md-sys-color-inverse-surface:             #2D3131;
  --md-sys-color-inverse-on-surface:          #EFF1F0;
  --md-sys-color-inverse-primary:             #8ED3CC;
  --md-sys-color-scrim:                       #000000;
  --md-sys-color-shadow:                      #000000;

  /* ---------- Typografie (Systemschrift, kein CDN) ---------- */
  --md-ref-typeface-brand: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --md-ref-typeface-plain: var(--md-ref-typeface-brand);
  --md-ref-typeface-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --md-sys-typescale-display-large:   400 3.5625rem/4rem    var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium:  400 2.8125rem/3.25rem var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small:   400 2.25rem/2.75rem   var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large:  400 2rem/2.5rem       var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 400 1.75rem/2.25rem   var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small:  400 1.5rem/2rem       var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large:     400 1.375rem/1.75rem  var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium:    500 1rem/1.5rem       var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small:     500 0.875rem/1.25rem  var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large:      400 1rem/1.5rem       var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium:     400 0.875rem/1.25rem  var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small:      400 0.75rem/1rem      var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large:     500 0.875rem/1.25rem  var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium:    500 0.75rem/1rem      var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small:     500 0.6875rem/1rem    var(--md-ref-typeface-plain);

  /* ---------- Shape ---------- */
  --md-sys-shape-corner-none:        0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small:       8px;
  --md-sys-shape-corner-medium:      12px;
  --md-sys-shape-corner-large:       16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full:        9999px;

  /* ---------- Elevation (Schatten) ---------- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

  /* ---------- State layers ---------- */
  --md-sys-state-hover-opacity:   .08;
  --md-sys-state-focus-opacity:   .12;
  --md-sys-state-pressed-opacity: .12;

  /* ---------- Motion ---------- */
  --md-sys-motion-duration-short:  150ms;
  --md-sys-motion-duration-medium: 250ms;
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);

  /* ---------- Layout ---------- */
  --mk-space-1: 4px;  --mk-space-2: 8px;  --mk-space-3: 12px; --mk-space-4: 16px;
  --mk-space-5: 20px; --mk-space-6: 24px; --mk-space-8: 32px; --mk-space-10: 40px;
  --mk-touch-min: 48px;
  --mk-nav-rail-width: 80px;
  --mk-nav-drawer-width: 280px;
  --mk-content-max: 1400px;

  color-scheme: light;
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --md-sys-color-primary:                #8ED3CC;
  --md-sys-color-on-primary:             #003735;
  --md-sys-color-primary-container:      #00504C;
  --md-sys-color-on-primary-container:   #A9EFE8;
  --md-sys-color-secondary:              #ECC18A;
  --md-sys-color-on-secondary:           #432C00;
  --md-sys-color-secondary-container:    #5F4214;
  --md-sys-color-on-secondary-container: #FFDDB3;
  --md-sys-color-tertiary:               #C4C3EA;
  --md-sys-color-on-tertiary:            #2C2D4D;
  --md-sys-color-tertiary-container:     #434465;
  --md-sys-color-on-tertiary-container:  #E1DFFF;
  --md-sys-color-error:                  #FFB4AB;
  --md-sys-color-on-error:               #690005;
  --md-sys-color-error-container:        #93000A;
  --md-sys-color-on-error-container:     #FFDAD6;

  --mk-color-good:     #81C784;
  --mk-color-good-bg:  #1F3A22;
  --mk-color-bad:      #EF9A9A;
  --mk-color-bad-bg:   #3F1F1F;
  --mk-color-gap:      #9E9E9E;
  --mk-color-gap-bg:   #2A2D2D;

  --md-sys-color-surface:                     #101414;
  --md-sys-color-surface-dim:                 #101414;
  --md-sys-color-surface-bright:              #363A39;
  --md-sys-color-surface-container-lowest:    #0B0F0F;
  --md-sys-color-surface-container-low:       #191C1C;
  --md-sys-color-surface-container:           #1D2020;
  --md-sys-color-surface-container-high:      #272B2A;
  --md-sys-color-surface-container-highest:   #323535;
  --md-sys-color-on-surface:                  #E0E3E2;
  --md-sys-color-on-surface-variant:          #BEC9C6;
  --md-sys-color-outline:                     #889390;
  --md-sys-color-outline-variant:             #3F4947;
  --md-sys-color-inverse-surface:             #E0E3E2;
  --md-sys-color-inverse-on-surface:          #2D3131;
  --md-sys-color-inverse-primary:             #1F5F5B;

  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.4);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.4);
  --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.4);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --md-sys-motion-duration-short: 0ms; --md-sys-motion-duration-medium: 0ms; }
}