/* ==============================================================
   Tenten – Farben & Schrift
   Leitlinie: reduziert wie die Tesla-App – keine Outlines, Flächen statt
   Rahmen, viel Weißraum, monochrom + Neon-Gelbgrün für primäre Aktionen
   und Neon-Pink für ausgewählte/aktive Zustände.
   Street-Charakter nur über Logo, Graffiti-Überschriften/Hero-Zahlen und den Ton.
   Hell/Dunkel folgt automatisch dem Handy.
   ============================================================== */

/* ---------- Überschriften-Schrift: Sedgwick Ave Display (Google Font, Lizenz OFL) ----------
   Graffiti-Handschrift, lokal eingebunden aus fonts/SedgwickAveDisplay-Regular.ttf.
   Es wird NICHTS von Google-Servern geladen (DSGVO). Lizenz: fonts/OFL-SedgwickAveDisplay.txt */
@font-face {
  font-family: "Sedgwick Ave Display";
  src: url("../fonts/SedgwickAveDisplay-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --accent: #c6ff00;        /* Neon-Gelbgrün: NUR primäre Aktion & aktive Zustände, immer als Fläche */
  --on-accent: #111111;
  --accent-line: #4b7300;   /* Akzent als feine Linie auf Weiß (Neon wäre unsichtbar) */     /* Schrift auf der Akzentfläche */
  --highlight: #ff2e93;     /* Neon-Pink: nur seltene Highlights (Zu-Null-Klecks) */
  --active: #ff2e93;        /* Neon-Pink: ausgewählte/aktive Zustände (Chips, Umschalter, Zusage, eigene Umfrage-Tage) */
  --on-active: #111111;     /* Schrift auf Pink (Kontrast ≈ 6:1) */
  --on-cyan: #ffffff;       /* Schrift auf Cyan-Fläche (hell: weiß auf #006577 ≈ 6.9:1) */
  --cyan: #006577;          /* Cyan: dritte Akzentfarbe, nur informativ (Avatar-Initialen, Uhr auf der Tafel). Hell abgedunkelt: ≥ 4.5:1 auf Weiß und auf Avatar-Grau */

  --bg: #ffffff;
  --surface: #f4f4f4;       /* Karten/Flächen: nur leicht anderer Ton */
  --surface-2: #ebebeb;     /* Chips, Eingabefelder, sekundäre Buttons */
  --surface-3: #e0e0e0;
  --text: #171717;
  --muted: #6b6b6b;         /* Beschriftungen klein & grau (Kontrast ≥ 4.5:1 auf Weiß) */
  --faint: #ececec;         /* ganz feine Linie, falls nötig */
  --up: #171717;
  --down: #7a7a7a;
  --danger: #c62828;
  --float-shadow: 0 8px 30px rgba(0, 0, 0, .12);

  /* Schriftgröße: Basis 18 px (= 112,5 % der Browser-Vorgabe, +12,5 %). Alle rem-Größen ziehen proportional mit. */
  --fs-root: 112.5%;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Anzeigetafel (Fallblatt): IMMER dunkel, auch im Hellmodus. Kontraste auf --board-bg ≥ 7:1 */
  --board-bg: #0c0c0c;
  --board-row-me: #1a1a1a;
  --board-cell: #222222;
  --board-split: rgba(0, 0, 0, .75);
  --board-line: #1c1c1c;
  --board-text: #f5f2e8;
  --board-muted: #a6a6a6;
  --board-head: #ffc233;    /* Kopfzeile wie Abflugtafel (Bernstein) */
  --board-go: #c6ff00;      /* DABEI / DA */
  --board-wait: #ffc233;    /* +15 / +30 / VIELL. */
  --board-out: #ff5c8a;     /* RAUS */
  --board-cyan: #00e5ff;    /* Uhr/Info auf der (immer dunklen) Tafel */

  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-marker: "Sedgwick Ave Display", "Marker Felt", "Chalkboard SE", "Segoe Print", "Bradley Hand", cursive;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-line: #c6ff00;
    --cyan: #00e5ff;
    --on-cyan: #111111;     /* dunkel: fast schwarz auf #00e5ff ≈ 12:1 */
    --bg: #000000;
    --surface: #121212;
    --surface-2: #1d1d1d;
    --surface-3: #2a2a2a;
    --text: #f2f2f2;
    --muted: #8c8c8c;
    --faint: #1c1c1c;
    --up: #f2f2f2;
    --down: #8c8c8c;
    --danger: #ff6b6b;
    --float-shadow: 0 8px 30px rgba(0, 0, 0, .6);
    --board-bg: #141414;      /* Tafel hebt sich vom schwarzen Grund ab */
    --board-row-me: #222222;
    --board-cell: #2a2a2a;
  }
}