/* =====================================================================
   Gemeinsame Gestaltungswerte für alle Werkzeuge.

   Leitgedanke: Die Oberfläche hat keine eigene Farbe.

   Alles Farbige gehört dem Inhalt — Blau ist das eigene Fahrzeug, Orange
   das gegnerische. Wären die Bedienelemente auch bunt, konkurrierten sie
   mit der Aussage der Zeichnung. Die Werkzeuge sind deshalb neutral, und
   der einzige Akzent ist ein Teal, das in keiner Rollenfarbe vorkommt und
   dadurch nie mit dem Inhalt verwechselt werden kann.

   Die Neutraltöne sind leicht blau gekippt. Reines Grau wirkt unbedacht.

   Eigene Datei, weil Skizze und Monobild sie teilen. Zwei Kopien wären
   nach der dritten Änderung nicht mehr deckungsgleich.
   ===================================================================== */

:root {
  --chrome-0: #FBFCFC;
  --chrome-1: #F1F3F4;
  --chrome-2: #E4E7E9;
  --line:     #D3D8DB;
  --line-2:   #C2C9CD;
  --ink:      #10161A;
  --ink-2:    #4E5C63;
  --ink-3:    #7C8A91;

  --flaeche:  #E9ECEE;
  --raster:   #D0D6D9;
  --asphalt:  #C9CFD3;
  --markierung: #FFFFFF;

  /* Rollen: nicht Rot gegen Grün — etwa jeder zwölfte Mann unterscheidet
     die beiden nicht zuverlässig, und die Skizze muss im Schwarzweißdruck
     der Akte lesbar bleiben. */
  --rolle-eigen:   #1A5FD0;
  --rolle-gegner:  #C56A0E;
  --rolle-weitere: #6B7880;

  --akzent:   #0E8C8C;
  --akzent-2: #0E8C8C1F;
  --warnung:  #B3261E;

  --schatten-1: 0 1px 2px #10161a12, 0 2px 8px #10161a0e;
  --schatten-2: 0 2px 6px #10161a14, 0 12px 32px #10161a14;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --r-panel: 14px;
  --r-ctrl: 9px;
  --bar-h: 56px;
  --lib-w: 268px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chrome-0: #14191C;
    --chrome-1: #1B2226;
    --chrome-2: #232B30;
    --line:     #2E383D;
    --line-2:   #3A464C;
    --ink:      #E7EDEF;
    --ink-2:    #A2B0B6;
    --ink-3:    #77868D;

    --flaeche:  #10161A;
    --raster:   #212B30;
    --asphalt:  #2B3439;
    --markierung: #93A3AA;

    --rolle-eigen:   #5E9CFF;
    --rolle-gegner:  #F0A03C;
    --rolle-weitere: #8D9BA3;

    --akzent:   #33C2BC;
    --akzent-2: #33C2BC26;
    --warnung:  #F2827A;

    --schatten-1: 0 1px 2px #0007, 0 2px 8px #0005;
    --schatten-2: 0 2px 6px #0008, 0 12px 32px #0006;
  }
}

:root[data-theme="dark"] {
  --chrome-0:#14191C; --chrome-1:#1B2226; --chrome-2:#232B30; --line:#2E383D; --line-2:#3A464C;
  --ink:#E7EDEF; --ink-2:#A2B0B6; --ink-3:#77868D;
  --flaeche:#10161A; --raster:#212B30; --asphalt:#2B3439; --markierung:#93A3AA;
  --rolle-eigen:#5E9CFF; --rolle-gegner:#F0A03C; --rolle-weitere:#8D9BA3;
  --akzent:#33C2BC; --akzent-2:#33C2BC26; --warnung:#F2827A;
  --schatten-1: 0 1px 2px #0007, 0 2px 8px #0005;
  --schatten-2: 0 2px 6px #0008, 0 12px 32px #0006;
}
:root[data-theme="light"] {
  --chrome-0:#FBFCFC; --chrome-1:#F1F3F4; --chrome-2:#E4E7E9; --line:#D3D8DB; --line-2:#C2C9CD;
  --ink:#10161A; --ink-2:#4E5C63; --ink-3:#7C8A91;
  --flaeche:#E9ECEE; --raster:#D0D6D9; --asphalt:#C9CFD3; --markierung:#FFFFFF;
  --rolle-eigen:#1A5FD0; --rolle-gegner:#C56A0E; --rolle-weitere:#6B7880;
  --akzent:#0E8C8C; --akzent-2:#0E8C8C1F; --warnung:#B3261E;
  --schatten-1: 0 1px 2px #10161a12, 0 2px 8px #10161a0e;
  --schatten-2: 0 2px 6px #10161a14, 0 12px 32px #10161a14;
}