/* Design tokens (Light/Dark Theme) */

  :root {
    color-scheme: light;
    --surface-1:      #fcfcfb;
    --page:           #f5f5f3;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #6b6a64;
    --grid:           #e1e0d9;
    --baseline:       #c3c2b7;
    --border:         rgba(11,11,11,0.08);
    --card-shadow:    0 1px 2px rgba(11,11,11,0.04), 0 8px 24px rgba(11,11,11,0.05);
    --accent:         #2570cc;
    --accent-fill:    var(--accent); /* Füllung für Knöpfe mit weißer Schrift */
    --accent-wash:    rgba(37,112,204,0.10);

    --c-schwimmen: #1baf7a;
    --c-rad:       #2a78d6;
    --c-laufen:    #eb6834;
    --c-sonstiges: #a6a49c;
    --c-hr-avg:    #2a78d6;
    --c-hr-max:    #e34948;
    --c-load:      #c3c2b7;
    --c-ctl:       #2a78d6;
    --c-atl:       #eb6834;
    --c-tsb-pos:   #1baf7a;
    --c-tsb-neg:   #e34948;
    --c-good:      #0ca30c;
    --c-warn:      #fab219;
    --c-crit:      #d03b3b;
    --c-z1: #a6a49c;
    --c-z2: #1baf7a;
    --c-z3: #eda100;
    --c-z4: #eb6834;
    --c-z5: #e34948;
    --card-shadow-hover: 0 4px 10px rgba(11,11,11,0.06), 0 16px 36px rgba(11,11,11,0.09);
    --row-added-wash: rgba(12,163,12,0.16);

    /* Statusfarben als SCHRIFT: --c-good/-warn/-crit sind als Füllung gedacht
       und als Text auf hellem Grund zu blass (Kontrast unter 4,5:1). */
    --c-good-text: #097009;
    --c-warn-text: #8a5a00;
    --c-crit-text: #a82a2a;

    /* iPhone/Touch: Mindestgröße für Tipp-Ziele und Sicherheitsabstände für
       Notch, Home-Indikator und Querformat (0 auf Geräten ohne Aussparung). */
    --touch-min:   40px;
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --surface-1:      #1c1c1b;
      --page:           #101010;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --text-muted:     #9a9892;
      --grid:           #2c2c2a;
      --baseline:       #3a3a38;
      --border:         rgba(255,255,255,0.08);
      --card-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
      --accent:         #3987e5;
      --accent-fill:    #2872d0;
      --accent-wash:    rgba(57,135,229,0.16);
      --c-good-text: #2fc42f;
      --c-warn-text: #fab219;
      --c-crit-text: #e66767;
      --c-schwimmen: #199e70;
      --c-rad:       #3987e5;
      --c-laufen:    #d95926;
      --c-sonstiges: #6f6d66;
      --c-hr-avg:    #3987e5;
      --c-hr-max:    #e66767;
      --c-load:      #3a3a38;
      --c-ctl:       #3987e5;
      --c-atl:       #d95926;
      --c-tsb-pos:   #199e70;
      --c-tsb-neg:   #e66767;
      --card-shadow-hover: 0 4px 10px rgba(0,0,0,0.35), 0 16px 36px rgba(0,0,0,0.4);
      --row-added-wash: rgba(12,163,12,0.28);
    }
  }

  /* Manueller Hell/Dunkel-Schalter: gewinnt in beide Richtungen gegen die
     automatische prefers-color-scheme-Einstellung des Betriebssystems. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface-1:      #1c1c1b;
    --page:           #101010;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #9a9892;
    --grid:           #2c2c2a;
    --baseline:       #3a3a38;
    --border:         rgba(255,255,255,0.08);
    --card-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    --accent:         #3987e5;
    --accent-fill:    #2872d0;
    --accent-wash:    rgba(57,135,229,0.16);
    --c-good-text: #2fc42f;
    --c-warn-text: #fab219;
    --c-crit-text: #e66767;
    --c-schwimmen: #199e70;
    --c-rad:       #3987e5;
    --c-laufen:    #d95926;
    --c-sonstiges: #6f6d66;
    --c-hr-avg:    #3987e5;
    --c-hr-max:    #e66767;
    --c-load:      #3a3a38;
    --c-ctl:       #3987e5;
    --c-atl:       #d95926;
    --c-tsb-pos:   #199e70;
    --c-tsb-neg:   #e66767;
    --card-shadow-hover: 0 4px 10px rgba(0,0,0,0.35), 0 16px 36px rgba(0,0,0,0.4);
    --row-added-wash: rgba(12,163,12,0.28);
  }