/* ═══ esszehNET v2 · tokens.css — die EINZIGE Quelle fuer Werte ═══
   Keine Regeln, nur Variablen. Screens verwenden ausschliesslich diese Namen. */
:root{
  /* Schrift */
  --f: 'Outfit', system-ui, -apple-system, sans-serif;
  /* Schriftskala (verbindlich, gilt fuer ALLE Screens — Stand MEHR/Mitglieder):
     11.25 Mikro-Kapitaelchen · 12.5 Eyebrow/Status/Chip · 13.25 Unterzeile
     14.5 Fliesstext · 15.75 Zeilentitel/Name · 17 Kartentitel klein
     21 Karten-/Sheet-Titel · 24 Screen-Titel · 16 NUR Eingabefelder (iOS-Zoom) */
  --fs-mini: 11.25px; /* Mikro-Kapitaelchen */
  --fs-eb: 12.5px;    /* Eyebrow, Status, Chip */
  --fs-sub: 13.25px;  /* Unterzeile */
  --fs-body: 14.5px;  /* Fliesstext */
  --fs-row: 15.75px;  /* Zeilentitel, Name */
  --fs-val: 17px;     /* Kartentitel klein, Feldwert */
  --fs-lead: 21px;    /* Karten- und Sheet-Titel */
  --fs-title: 24px;   /* Screen-Titel */
  --fs-zahl: 40px;    /* die EINE grosse Kennzahl eines Screens (Summe, Enddatum, Stundenzahl) */
  --fs-input: 16px;   /* Eingaben: nie kleiner, sonst zoomt iOS */
  --lsp-eb: 1.3px;

  /* Radien */
  --r-card: 18px;
  --r-field: 12px;
  --r-chip: 999px;

  /* Raster — EINE Abstandsleiter, Basis 4. Keine Zwischenwerte.
     2 Haarabstand (Titel zu Unterzeile) · 4 Zeichen zu Wort · 8 eng zusammen
     12 Zeile innen · 16 Gruppe · 20 Block und Inhaltskante · 24 vor einer
     Abschnittsueberschrift · 32 grosser Absatz */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --edge: var(--sp-6);   /* Inhaltskante links = rechts */
  --gap: var(--sp-3);
  --row-y: var(--sp-4);  /* vertikale Polsterung einer Zeile */

  /* Akzent */
  --hl: #f9ea19;   /* Vereinsgelb — einziges Gelb der App */
  --hl-ink: #1a1a18;  /* Text auf Gelb */

  /* Sportarten */
  --sp-fuss: #15ad6a;
  --sp-tennis: #2f86e0;
  --sp-ttennis: #d6479b;
  --sp-volley: #f5811f;
  --sp-breit: #9b5de5;

  /* Sportarten als TEXT auf dunklem Grund (Mockup 5b) */
  --sp-fuss-t: #5cbf8c;
  --sp-tennis-t: #7fa6e0;
  --sp-ttennis-t: #e58cc0;
  --sp-volley-t: #f5a83c;
  --sp-breit-t: #b0a5e8;
  --kind-t: #6fc9c4;

  /* Status */
  --ok: #5cbf8c;
  --bad: #e0533f;
  --info: #8fbfe8;
}

/* Dunkel (Standard) */
:root, [data-theme="dark"]{
  --head: #1e222a;
  --bg: #1a1e24;
  --card: #252b33;
  --kachel: #222730;          /* 152b: nur ein Hauch heller als der Grund, kein Rand */
  --kachel-rand: transparent;
  --kachel-schatten: 0 1px 2px rgba(0,0,0,.16);
  --kachel-fest: #2d333d;     /* deckend — fuer Dinge auf einer Flaeche, etwa den Reiter in der Schiene */
  --field: #222730;
  --line: rgba(255,255,255,.07);
  --line-stark: rgba(255,255,255,.15);   /* Kante der Karten (113c) — Rangfolge ueber die Linie, nicht ueber eine Flaeche */
  --ink: #f0f2f5;
  --muted: #858d97;
  --hl-text: var(--hl);
  --shadow: 0 10px 30px -18px rgba(0,0,0,.65);
}

/* Hell */
[data-theme="light"]{
  --sp-fuss-t: #12855a;
  --sp-tennis-t: #2f6fbf;
  --sp-ttennis-t: #a6246f;
  --sp-volley-t: #b96a10;
  --sp-breit-t: #7448c9;
  --kind-t: #2b8f8a;
  --head: #eceade;
  --bg: #f7f6f1;
  --card: #ffffff;
  --kachel: #ffffff;
  --kachel-rand: transparent;
  --kachel-schatten: 0 1px 2px rgba(26,26,24,.05);
  --kachel-fest: #ffffff;
  --field: #f2f1ea;
  --line: #e6e4da;
  --line-stark: #d4d1c2;
  --ink: #1a1a18;
  --muted: #6c7075;
  --hl-text: #8a7a00;
  --shadow: 0 10px 30px -20px rgba(20,28,46,.28);
}

/* ═══ Breiter Farbraum (iPhone-Display) ═══
   Am Mac wirken die Farben kraeftiger als auf dem iPhone: Hex-Werte sind sRGB und werden
   auf dem weiten Farbraum des iPhones brav zurueckgerechnet — sie wirken blasser. Wo das
   Geraet mehr kann, werden Akzent-, Sportart- und Statusfarben deshalb in display-p3
   angegeben (gleicher Farbton, volle Saettigung). Neutraltoene bleiben unangetastet. */
@supports (color: color(display-p3 1 1 1)){
  @media (color-gamut: p3){
    :root{
      --sp-fuss: color(display-p3 .082 .678 .416);
      --sp-tennis: color(display-p3 .184 .525 .878);
      --sp-ttennis: color(display-p3 .839 .278 .608);
      --sp-volley: color(display-p3 .961 .506 .122);
      --sp-breit: color(display-p3 .608 .365 .898);
      --sp-fuss-t: color(display-p3 .361 .749 .549);
      --sp-tennis-t: color(display-p3 .498 .651 .878);
      --sp-ttennis-t: color(display-p3 .898 .549 .753);
      --sp-volley-t: color(display-p3 .961 .659 .235);
      --sp-breit-t: color(display-p3 .690 .647 .910);
      --kind-t: color(display-p3 .435 .788 .769);
      --ok: color(display-p3 .361 .749 .549);
      --bad: color(display-p3 .878 .325 .247);
      --info: color(display-p3 .561 .749 .910);
    }
    [data-theme="light"]{
      --sp-fuss-t: color(display-p3 .071 .522 .353);
      --sp-tennis-t: color(display-p3 .184 .435 .749);
      --sp-ttennis-t: color(display-p3 .651 .141 .435);
      --sp-volley-t: color(display-p3 .725 .416 .063);
      --sp-breit-t: color(display-p3 .455 .282 .788);
      --kind-t: color(display-p3 .169 .561 .541);
      --hl-text: color(display-p3 .541 .478 0);
    }
  }
}

/* ═══ Smartphone: kraeftigere Farben ═══
   Auf dem iPhone wirken dieselben Werte flauer als am Mac (Displayabstimmung, True Tone).
   Auf Touch-Geraeten werden Akzent, Sportarten und Status daher gesaettigter gefahren,
   Kontraste leicht angehoben. Neutraltoene bleiben. */
@media (hover: none) and (pointer: coarse){
  :root{
    --hl: #f9ea19;
    --sp-fuss: #00c46b;
    --sp-tennis: #1f8cff;
    --sp-ttennis: #e04ba6;
    --sp-volley: #ff8400;
    --sp-breit: #a855ff;
    --sp-fuss-t: #4fd394;
    --sp-tennis-t: #79b4ff;
    --sp-ttennis-t: #f094c8;
    --sp-volley-t: #ffb03c;
    --sp-breit-t: #bda6ff;
    --kind-t: #52dbd4;
    --ok: #4fd394;
    --bad: #ff5a41;
    --info: #86c8ff;
  }
  [data-theme="dark"]{ --ink:#ffffff; --muted:#9aa0a6; }
  [data-theme="light"]{
    --sp-fuss-t:#00794a; --sp-tennis-t:#1560c8; --sp-ttennis-t:#a6246f;
    --sp-volley-t:#c25f00; --sp-breit-t:#7a35d6; --kind-t:#0f8a84; --hl-text:#8a7300;
  }
}