/* Farben, Abstaende und Schrift der App als CSS-Variablen.
   Heller Modus ist Standard; dunkel folgt dem System oder data-theme="dark" (auf <html> oder einem Bereich).
   Grundlage: Webseite (#2a4d80, #1a3760, #fafafa) und Gold aus dem alten Logo. */

:root,
[data-theme="light"]
{
   color-scheme: light dark;

   /* Marke */
   --c-blue: #2a4d80;          /* Grundfarbe der Webseite: Kopf, Knoepfe */
   --c-blue-dark: #1a3760;     /* dunkler: Verlauf, gedrueckte Knoepfe */
   --c-blue-light: #3a64a3;    /* heller: Verlauf, Schachbrettmuster */
   --c-gold: #e9a91c;          /* Akzent aus dem Logo */
   --c-gold-light: #f6c94a;
   --c-gold-dark: #b97c0c;

   /* Flaechen und Text (hell) */
   --c-bg: #f3f5f9;            /* App-Hintergrund, etwas kuehler als #fafafa, damit Karten abheben */
   --c-ana-bg: #eaf4e4;         /* Testbrett: gruenlich, deutlich anders als die Partie */
   --c-ana-text: #1f3a14;
   --c-ana-border: #4f7a3a;
   --c-turn-text: #7a5000;      /* "Sie sind am Zug": Gold, dunkel genug fuer 4.5:1 auf hell */
   --c-surface: #ffffff;       /* Karten, Listen */
   --c-surface-2: #e9eef6;     /* Hervorhebung, Eingabefelder */
   --c-text: #1c2433;
   --c-text-muted: #5c677a;
   --c-border: #dde3ec;
   --c-primary: var(--c-blue); /* Links, Knoepfe, aktiver Tab */
   --c-primary-tint: #e3ebf6;  /* Fuellung aktiver Tab, Auswahl */
   --c-on-primary: #ffffff;
   --c-button: var(--c-blue);  /* Hauptknoepfe (weisse Schrift) */

   /* Zustaende */
   --c-success: #2e7d4f;
   --c-warning: #b26a00;
   --c-danger: #c0392b;
   --c-turn: var(--c-gold);    /* "Du bist am Zug" */

   /* Kopf und Tabbar */
   --c-header-1: #33598f;
   --c-header-2: #1a3760;
   --c-header-text: #ffffff;
   --c-tabbar: #ffffff;
   --c-tab: #5c677a;
   --c-tab-active: var(--c-blue);

   /* Brett (zwei Vorschlaege, umschaltbar in den Einstellungen) */
   --board-light: #dfe7f2;     /* blau */
   --board-dark: #7b9cc9;
   --board-wood-light: #f0d9b5; /* klassisch wie auf der Webseite */
   --board-wood-dark: #b58863;
   --board-last-move: rgba(246, 201, 74, 0.55);
   --board-select: rgba(42, 77, 128, 0.45);
   --board-mark: rgba(46, 160, 67, 0.35);      /* Schach lernen: markierte Felder */
   --board-mark-ring: rgba(22, 110, 40, 0.85);

   /* Masse */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --radius: 12px;
   --radius-s: 8px;
   --touch: 44px;              /* Mindestgroesse fuer Tippziele */
   --header-h: 52px;
   --tabbar-h: 58px;
   --shadow: 0 1px 2px rgba(16, 32, 64, 0.08), 0 2px 8px rgba(16, 32, 64, 0.06);

   --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --fs-s: 13px;
   --fs: 16px;
   --fs-l: 19px;
}

@media (prefers-color-scheme: dark)
{
   :root:not([data-theme="light"])
   {
      --c-bg: #0e1522;
      --c-ana-bg: #1c2e17;
      --c-ana-text: #d6ecc9;
      --c-ana-border: #7fb069;
      --c-turn-text: #f6c94a;
      --c-surface: #18233a;
      --c-surface-2: #1f2c47;
      --c-text: #e7ecf5;
      --c-text-muted: #9aa7bd;
      --c-border: #2a3957;
      --c-primary: #7ea4dd;
      --c-primary-tint: #22365a;
      --c-on-primary: #0e1522;
      --c-button: #3a64a3;
      --c-gold: #f2c14e;
      --c-success: #5cc48a;
      --c-warning: #f0a54a;
      --c-danger: #ef6b5e;
      --c-header-1: #1f3d68;
      --c-header-2: #0f2240;
      --c-tabbar: #121c2f;
      --c-tab: #8794ab;
      --c-tab-active: #9dbdf0;
      --board-light: #b9c8de;
      --board-dark: #5d7fae;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   }
}

[data-theme="dark"]
{
   --c-bg: #0e1522;
   --c-ana-bg: #1c2e17;
   --c-ana-text: #d6ecc9;
   --c-ana-border: #7fb069;
   --c-turn-text: #f6c94a;
   --c-surface: #18233a;
   --c-surface-2: #1f2c47;
   --c-text: #e7ecf5;
   --c-text-muted: #9aa7bd;
   --c-border: #2a3957;
   --c-primary: #7ea4dd;
   --c-primary-tint: #22365a;
   --c-on-primary: #0e1522;
   --c-button: #3a64a3;
   --c-gold: #f2c14e;
   --c-success: #5cc48a;
   --c-warning: #f0a54a;
   --c-danger: #ef6b5e;
   --c-header-1: #1f3d68;
   --c-header-2: #0f2240;
   --c-tabbar: #121c2f;
   --c-tab: #8794ab;
   --c-tab-active: #9dbdf0;
   --board-light: #b9c8de;
   --board-dark: #5d7fae;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}