/* Design-Token für alle drei Oberflächen: statische Landing (public/*.html),
   server-gerenderte Vereinsseiten (routes/public.ts:page) und die SPA
   (web/src/styles.css). Wird als /tokens.css ausgeliefert — derselbe
   Root-Static-Mount, über den auch /fonts/inter-latin.woff2 läuft.

   Vorher lag die Palette fünfmal als Hex-Literal nebeneinander und war
   auseinandergelaufen (drei Grün-, drei Rottöne). Hier ist die einzige Quelle;
   Regeln verwenden ausschließlich var(--…).

   Namensschema nach docs/design-system.md §1. Die älteren Landing-Namen
   (--canvas/--ink/--hairline …) bleiben als Alias erhalten, damit die
   statischen Seiten ihre Regeln nicht anfassen müssen. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
}

:root {
  color-scheme: light dark;

  --bg: #f5f1ec;
  --surface: #fff;
  --surface-muted: #efeae2;
  --text: #111111;
  --text-soft: #444442;
  --text-muted: #626260;
  /* War #7b7b78 und riss damit 4.5:1 an jeder Verwendungsstelle: 3.78 auf
     Creme, 4.25 auf Weiß. Jetzt 4.66 bzw. 5.51 — die Stufe bleibt erkennbar
     heller als --text-muted (5.44 / 6.11). */
  --text-faint: #696966;
  --text-disabled: #9c9fa5;
  --border: #d3cec6;
  --border-soft: #e4dfd7;
  --border-strong: #c4beb4;

  --accent: #111111;
  --accent-contrast: #fff;
  --accent-text: #111111;
  --accent-soft: #e7e2da;
  --accent-faint: #f0ece5;
  --accent-hover: #efeae2;
  --accent-sep: rgba(17, 17, 17, 0.55);

  --danger: #c43c3c;
  --danger-text: #c43c3c;
  --danger-bg: #f7e3e3;
  --success: #2e7d4f;
  --warn: #b0812a;
  --warn-bg: #f7eeda;
  --warn-soft: #f3e8d8;

  --match-bg: #d7e9dd;
  --match-border: #9dc4aa;
  --match-text: #14482c;
  --training-bg: #dbe7f6;
  --training-border: #a9c4e4;
  --training-text: #1c3a5e;
  --blocking-a: #f3d9d9;
  --blocking-b: #fbeaea;
  --blocking-border: #d9a6a6;
  --blocking-text: #7c2222;
  --away-track: #f4efe6;
  --away-bg: #f3e6c8;
  --away-border: #d9c188;
  --away-text: #6a5215;

  /* Frei gewordener Slot (abgesagtes Training). Warm und gestreift statt einer
     weiteren Vollfläche: ein freier Platz ist keine Belegung, und er soll im
     Raster als Einziger aus der Reihe fallen. */
  --frei-bg: #fdf5e4;
  --frei-stripe: #f0e0bd;
  --frei-border: #c08a1f;
  --frei-text: #6d4f12;

  --track-bg: #fbf9f6;
  --track-border: #e8e3db;
  --hourline: #efeae2;
  --halfline: #d3cec6;
  --sixthline: #f0ece6;
  --block-border: #8fb0d4;
  --block-bg: rgba(169, 196, 228, 0.12);

  --highlight-outline: #000;
  --input-overlay: rgba(255, 255, 255, 0.92);
  --backdrop: rgba(25, 22, 18, 0.45);
  --shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-tooltip: 0 6px 18px rgba(0, 0, 0, 0.18);
  --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.25);

  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-card-lg: 12px;
}

/* ===========================================================================
   Farbprofile der Vereine — „leichtes Theming Richtung Verein".

   Chrome-only: die Vereinsfarben tragen ausschließlich die beiden Bänder der
   Kopfzeile. Band 1 bekommt Farbe 1, Band 2 Farbe 2. Alles darunter bleibt
   neutral — der Kalender, die Primäraktion und die Statuscodierung rührt kein
   Profil an. Sonst hieße Grün gleichzeitig „Verein" und „Spiel".

   Zwei Schichten, und die Trennung ist wichtig:

   1. Das Profil belegt am Element mit dem Attribut eine Palette
      (--club-b1-* für Band 1, --club-b2-* für Band 2).
   2. Die Bandklassen mappen die Palette auf den Bandvertrag
      (--band-bg/-on/-muted/-line/-focus). Alles in einem Band liest nur diesen
      Vertrag — nie --surface, --text oder --accent.

   Warum nicht direkt `[data-club-theme='x'] .topbar { --band-bg: … }`?
   Weil dann *jeder* Vorfahre mit dem Attribut auf *jedes* .topbar darin
   passt. Bei gleicher Spezifität gewinnt nicht der nähere Vorfahre, sondern
   die spätere Regel im Stylesheet. Die Farbvorschau in der Konfiguration
   (mehrere Profile nebeneinander auf einer Seite, die selbst ein Profil trägt)
   zeigte deshalb überall dieselbe Farbe — die des zuletzt definierten Profils.
   Custom Properties erben dagegen: liegen sie auf dem Attribut-Element selbst,
   gewinnt der nächste Vorfahre, und die Vorschau stimmt per Konstruktion.

   Alle Werte sind kuratiert und werden von test/theme-kontrast.test.ts
   nachgerechnet. Wer hier einen Ton ändert, ändert einen Testwert mit.
   =========================================================================== */

/* Neutral (clubs.theme IS NULL) — die Oberfläche ohne Verein. Der Default:
   Bestandsvereine sehen aus wie vorher, bis jemand aktiv wählt. */
[data-club-theme='neutral'] {
  --club-b1-bg: var(--surface);
  --club-b1-on: var(--text);
  --club-b1-muted: var(--text-muted);
  --club-b1-line: var(--border-strong);
  --club-b1-focus: var(--accent);
  --club-b2-bg: var(--surface-muted);
  --club-b2-on: var(--text);
  --club-b2-muted: var(--text-muted);
  --club-b2-line: var(--border-strong);
  --club-b2-focus: var(--accent);
}

/* Farbe 2 ist in allen sechs Profilen entweder Weiß oder Schwarz — nie
   chromatisch. Für Band 2 gibt es deshalb nur zwei Belegungen; sie stehen
   jeweils direkt beim Profil, damit ein Profil an einer Stelle vollständig
   lesbar ist. */

[data-club-theme='gruen-weiss'] {
  --club-b1-bg: #1c6b3a;
  --club-b1-on: #ffffff;
  --club-b1-muted: #cfe4d8;
  --club-b1-line: #6fa285;
  --club-b1-focus: #ffffff;
  --club-b2-bg: #ffffff;
  --club-b2-on: #111111;
  --club-b2-muted: #626260;
  --club-b2-line: #c4beb4;
  --club-b2-focus: #111111;
}

[data-club-theme='blau-weiss'] {
  --club-b1-bg: #1b4f8a;
  --club-b1-on: #ffffff;
  --club-b1-muted: #cfdcec;
  --club-b1-line: #6d90b8;
  --club-b1-focus: #ffffff;
  --club-b2-bg: #ffffff;
  --club-b2-on: #111111;
  --club-b2-muted: #626260;
  --club-b2-line: #c4beb4;
  --club-b2-focus: #111111;
}

[data-club-theme='rot-weiss'] {
  --club-b1-bg: #a5312e;
  --club-b1-on: #ffffff;
  --club-b1-muted: #eccfce;
  --club-b1-line: #c47b79;
  --club-b1-focus: #ffffff;
  --club-b2-bg: #ffffff;
  --club-b2-on: #111111;
  --club-b2-muted: #626260;
  --club-b2-line: #c4beb4;
  --club-b2-focus: #111111;
}

[data-club-theme='rot-schwarz'] {
  --club-b1-bg: #a5312e;
  --club-b1-on: #ffffff;
  --club-b1-muted: #eccfce;
  --club-b1-line: #c47b79;
  --club-b1-focus: #ffffff;
  --club-b2-bg: #1a1a1a;
  --club-b2-on: #f2f0ed;
  --club-b2-muted: #a8a49e;
  --club-b2-line: #5a5651;
  --club-b2-focus: #ffffff;
}

/* Das einzige Profil mit hellem Band 1: der Kopf läuft hier hell → dunkel,
   überall sonst dunkel → hell. Beabsichtigt — ein dunkles Gelb wäre kein
   Vereinsgelb mehr, sondern Ocker, und Ocker ist im System die Warnung. */
[data-club-theme='gelb-schwarz'] {
  --club-b1-bg: #edc316;
  --club-b1-on: #1a1500;
  --club-b1-muted: #5c4d09;
  --club-b1-line: #a3860a;
  --club-b1-focus: #111111;
  --club-b2-bg: #1a1a1a;
  --club-b2-on: #f2f0ed;
  --club-b2-muted: #a8a49e;
  --club-b2-line: #5a5651;
  --club-b2-focus: #ffffff;
}

[data-club-theme='schwarz-weiss'] {
  --club-b1-bg: #1a1a1a;
  --club-b1-on: #f2f0ed;
  --club-b1-muted: #a8a49e;
  --club-b1-line: #5a5651;
  --club-b1-focus: #ffffff;
  --club-b2-bg: #ffffff;
  --club-b2-on: #111111;
  --club-b2-muted: #626260;
  --club-b2-line: #c4beb4;
  --club-b2-focus: #111111;
}

/* Palette → Bandvertrag. Diese zwei Regeln sind der Grund, warum jede
   Bandregel in public.ts und styles.css genau einmal dasteht. */
.topbar {
  --band-bg: var(--club-b1-bg);
  --band-on: var(--club-b1-on);
  --band-muted: var(--club-b1-muted);
  --band-line: var(--club-b1-line);
  --band-focus: var(--club-b1-focus);
}
.titlebar {
  --band-bg: var(--club-b2-bg);
  --band-on: var(--club-b2-on);
  --band-muted: var(--club-b2-muted);
  --band-line: var(--club-b2-line);
  --band-focus: var(--club-b2-focus);
}

/* Der Grund unter den Bändern: die Creme gehört uns, die Farbe gehört dem
   Verein. Vereinsheim-Creme ist für ein Interface ohne jede Chroma gebaut; ihr
   Gelbstich (R245/B236) bleibt unsichtbar, bis etwas Kühles dagegen steht — ein
   grünes oder blaues Band tut genau das, und die Creme kippt von „warmes
   Papier" nach „vergilbtes Weiß". Es ist nicht die Helligkeit (Weiß→Creme
   1.12:1, Weiß→Warmgrau 1.11:1), es ist der Ton. Also tritt der Grund zurück,
   sobald ein Verein seine Farbe setzt: eine Chroma pro Seite, und die gehört
   dem Verein.

   Ausdrücklich nur am `html`: das Attribut sitzt sonst noch auf den Kacheln der
   Farbvorschau, und die sollen die Seite unter sich nicht umfärben. */
html[data-club-theme]:not([data-club-theme='neutral']) {
  --bg: #f4f3f1;
  --surface-muted: #ebeae7;
}


/* Der Beispieltext in Eingabefeldern war der einzige Farbwert im ganzen
   Produkt, der nicht von hier kam: ohne Regel bleibt der Browser-Standard
   #757575 in beiden Themes stehen — im Dunkelmodus 3.64:1. Eine Regel für
   Landing, Vereinsseiten und SPA gemeinsam. (opacity, weil Firefox den
   Platzhalter sonst zusätzlich abschwächt.) */
::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Alias-Schicht: die Landing-Seiten (public/*.html) sprechen noch die älteren
   Namen der ersten Fassung. Ein Alias, kein zweiter Wert. */
:root {
  --canvas: var(--bg);
  --surface-1: var(--surface);
  --surface-2: var(--surface-muted);
  --hairline: var(--border);
  --hairline-soft: var(--border-soft);
  --ink: var(--text);
  --ink-muted: var(--text-muted);
  --ink-subtle: var(--text-faint);
  --on-primary: var(--accent-contrast);
  --error: var(--danger-text);
  /* Produktmockup der Landing: zeigt jetzt dieselben Event-Farben wie der
     echte Kalender statt einer eigenen, hellerer Variante. */
  --match-tx: var(--match-text);
  --match-bd: var(--match-border);
  --train-bg: var(--training-bg);
  --train-tx: var(--training-text);
  --train-bd: var(--training-border);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171512;
    --surface: #201d19;
    --surface-muted: #282420;
    --text: #ece8e2;
    --text-soft: #c4bfb7;
    --text-muted: #9c968d;
    /* Gegenstück zur Abdunklung im Hellmodus: #7b766e lag bei 3.72 auf
       --surface. Der Wert ist am dunkelsten Grund bemessen, auf dem die
       Stufe landen kann (--surface-muted), nicht am günstigsten. */
    --text-faint: #948e84;
    --text-disabled: #5f5b54;
    --border: #3a352f;
    --border-soft: #2e2a25;
    --border-strong: #4e483f;

    --accent: #ece8e2;
    --accent-contrast: #111111;
    --accent-text: #ece8e2;
    --accent-soft: #33302a;
    --accent-faint: #26231f;
    --accent-hover: #2c2924;
    --accent-sep: rgba(236, 232, 226, 0.6);

    --danger: #b23434;
    --danger-text: #e06a6a;
    --danger-bg: #33201d;
    --success: #4caf7d;
    --warn: #b0812a;
    --warn-bg: #2e2717;
    --warn-soft: #2c2417;

    --match-bg: #2c5340;
    --match-border: #64a37c;
    --match-text: #e3f3e9;
    --training-bg: #2c4a6c;
    --training-border: #648fc0;
    --training-text: #e2edfb;
    --blocking-a: #5c2f2f;
    --blocking-b: #482525;
    --blocking-border: #ad6060;
    --blocking-text: #f4cbcb;
    --away-track: #2a2620;
    --away-bg: #4d4229;
    --away-border: #97803f;
    --away-text: #efe0b0;

    --frei-bg: #2b2417;
    --frei-stripe: #3d3320;
    --frei-border: #c79a3a;
    --frei-text: #f2dfae;

    --track-bg: #1c1916;
    --track-border: #2e2a25;
    --hourline: #282420;
    --halfline: #45403a;
    --sixthline: #221f1b;
    --block-border: #41546b;
    --block-bg: rgba(100, 143, 192, 0.07);

    --highlight-outline: #fff;
    --input-overlay: rgba(32, 29, 25, 0.92);
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-tooltip: 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.65);
  }

  /* Dieselben sieben Profile im Dunkelmodus. Zwei Regeln gelten hier:
     die chromatische Farbe bekommt eine eigene, dunklere Variante — und der
     Weiß-Pol wird gedämpft, aber nicht abgeschafft.

     Der Weiß-Pol war zuerst eine dunkle Fläche (#201d19). Das nahm dem Profil
     nachts seine halbe Identität: Rot-Weiß und Rot-Schwarz waren dasselbe Bild,
     Schwarz-Weiß gar keins mehr. Jetzt trägt Band 2 ein gedämpftes Hell
     (#ccc7bf) — Luminanz 0.57 statt 1.00, Kante zum Seitengrund 10.7:1 statt
     18.1:1. Erkennbar als heller Pol, ohne der Leuchtbalken zu sein, der ein
     reines #fff auf dunkler Seite wäre. Die Schrift darauf kippt entsprechend
     ins Dunkle — das erledigt der Bandvertrag von allein.

     Neutral steht nicht dabei: es zeigt auf --surface/--text/--border-strong,
     und die sind oben schon umgestellt. */
  [data-club-theme='gruen-weiss'] {
    --club-b1-bg: #1e5c34;
    --club-b1-on: #e6f2ea;
    --club-b1-muted: #b2cbbb;
    --club-b1-line: #4c7d61;
    --club-b1-focus: #ffffff;
    --club-b2-bg: #ccc7bf;
    --club-b2-on: #17150f;
    --club-b2-muted: #55524b;
    --club-b2-line: #a19c95;
    --club-b2-focus: #17150f;
  }

  [data-club-theme='blau-weiss'] {
    --club-b1-bg: #1d456f;
    --club-b1-on: #e4edf7;
    --club-b1-muted: #a7bcd4;
    --club-b1-line: #4d6f97;
    --club-b1-focus: #ffffff;
    --club-b2-bg: #ccc7bf;
    --club-b2-on: #17150f;
    --club-b2-muted: #55524b;
    --club-b2-line: #a19c95;
    --club-b2-focus: #17150f;
  }

  [data-club-theme='rot-weiss'] {
    --club-b1-bg: #8c2b28;
    --club-b1-on: #f7e5e4;
    --club-b1-muted: #dcb7b5;
    --club-b1-line: #a85e5b;
    --club-b1-focus: #ffffff;
    --club-b2-bg: #ccc7bf;
    --club-b2-on: #17150f;
    --club-b2-muted: #55524b;
    --club-b2-line: #a19c95;
    --club-b2-focus: #17150f;
  }

  [data-club-theme='rot-schwarz'] {
    --club-b1-bg: #8c2b28;
    --club-b1-on: #f7e5e4;
    --club-b1-muted: #dcb7b5;
    --club-b1-line: #a85e5b;
    --club-b1-focus: #ffffff;
    --club-b2-bg: #171512;
    --club-b2-on: #ece8e2;
    --club-b2-muted: #9c968d;
    --club-b2-line: #45403a;
    --club-b2-focus: #ece8e2;
  }

  /* Gelb muss nachts runter: #edc316 auf dunklem Grund blendet wie eine
     Taschenlampe. Gedämpft, Schrift bleibt dunkel — das Profil behält seine
     Hell-auf-Dunkel-Umkehr auch im Dunkelmodus. */
  [data-club-theme='gelb-schwarz'] {
    --club-b1-bg: #c9a11a;
    --club-b1-on: #17130a;
    --club-b1-muted: #47390e;
    --club-b1-line: #8a6f0e;
    --club-b1-focus: #17130a;
    --club-b2-bg: #171512;
    --club-b2-on: #ece8e2;
    --club-b2-muted: #9c968d;
    --club-b2-line: #45403a;
    --club-b2-focus: #ece8e2;
  }

  [data-club-theme='schwarz-weiss'] {
    --club-b1-bg: #2a2621;
    --club-b1-on: #ece8e2;
    --club-b1-muted: #9c968d;
    --club-b1-line: #55504a;
    --club-b1-focus: #ece8e2;
    --club-b2-bg: #ccc7bf;
    --club-b2-on: #17150f;
    --club-b2-muted: #55524b;
    --club-b2-line: #a19c95;
    --club-b2-focus: #17150f;
  }

  html[data-club-theme]:not([data-club-theme='neutral']) {
    --bg: #171615;
    --surface-muted: #262524;
  }
}