/* ---------------------------------------------------------------------------
   Design-Tokens
   ---------------------------------------------------------------------------
   Einziger Ort, an dem Farben und Formen definiert werden. game.css greift nur
   ueber diese Variablen zu. Ein Theme setzt man ueber das Attribut
   data-theme am <html>-Element oder ueber ?theme=... in der URL.

   Zusaetzlich kann die Tischfarbe per ?bg=RRGGBB ueberschrieben werden, das
   setzt --table direkt am <html>-Element und sticht damit das Theme aus.
--------------------------------------------------------------------------- */

:root {
  /* Flaechen */
  --table: #1f6b4a;
  /* Spieltisch */
  --surface: #ffffff;
  /* Dialoge */
  --surface-sunken: #f2f2f0;

  /* Text */
  --ink: #16120f;
  --ink-soft: rgba(22, 18, 15, .62);

  /* Linien und Markierungen */
  --line: rgba(22, 18, 15, .14);
  --slot-line: rgba(255, 255, 255, .28);
  --slot-fill: rgba(0, 0, 0, .12);
  --accent: #f2c14e;
  /* Hervorhebung gueltiger Ablageziele */

  /* Bedienelemente in der Kopfzeile, liegen auf dem Tisch */
  --hud-ink: rgba(255, 255, 255, .92);
  --hud-ink-dim: rgba(255, 255, 255, .55);

  /* Form */
  --radius-card: .06;
  /* Faktor der Kartenbreite, nicht px */
  --radius-panel: 14px;
  --radius-button: 10px;

  /* Schatten */
  --shadow-card: 0 2px 6px rgba(0, 0, 0, .28);
  --shadow-drag: 0 12px 28px rgba(0, 0, 0, .42);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, .35);

  /* Schrift. Bewusst nur Systemschriften, damit das Spiel ohne Netz laeuft. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Timing */
  --move-time: .22s;
  --flip-time: .26s;
  --ease: cubic-bezier(.2, .8, .3, 1);

  color-scheme: light;
}

/* Heller Tisch, z.B. fuer Umfelder mit heller Seitenfarbe */
html[data-theme="light"] {
  --table: #e7e3d8;
  --slot-line: rgba(0, 0, 0, .22);
  --slot-fill: rgba(0, 0, 0, .05);
  --hud-ink: rgba(22, 18, 15, .88);
  --hud-ink-dim: rgba(22, 18, 15, .5);
  --accent: #c98a1a;
}

/* Dunkler Tisch */
html[data-theme="dark"] {
  --table: #16181d;
  --surface: #23262d;
  --surface-sunken: #1b1e24;
  --ink: #f2f3f5;
  --ink-soft: rgba(242, 243, 245, .62);
  --line: rgba(255, 255, 255, .12);
  --slot-line: rgba(255, 255, 255, .2);
  --slot-fill: rgba(255, 255, 255, .05);
  --accent: #7fd6a2;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .55);

  color-scheme: dark;
}