/* ==========================================================================
   DESIGN-TOKENS — einzige Stelle mit Hex-Werten
   ========================================================================== */
:root{
  /* Flächen */
  --bg-canvas:      #EFEFEF;
  --bg-chrome:      #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-hover:       #F4F4F4;
  --bg-active:      #4A6CF0;

  /* Linien */
  --line-hairline:  #E4E4E4;
  --line-card:      #E0E0E0;
  /* Warnfarben (Phase 3e): Duplikat-Markierung an Board-Karten und im
     Inspector. Eigene Toene statt --el-red, weil das eine Nutzerfarbe ist. */
  --warn-line:      #E0A03A;
  --warn-ink:       #8A5A10;
  --warn-bg:        #FDF3E0;

  --line-focus:     #4A6CF0;

  /* Text */
  --text-primary:   #2A2A2A;
  --text-secondary: #8A8A8A;
  --text-inverse:   #FFFFFF;

  /* Element-Farbtoken (8, je Fläche + Rand).
     Kräftigerer, gesättigterer Satz seit Phase 3b; das Rand-Prinzip (Rand ist
     der dunklere Zwilling der Fläche) bleibt. „pink" heißt jetzt „red" —
     persistence/schema.js bildet Bestandsdaten darauf ab. */
  --el-white:  #FFFFFF;  --el-white-b:  #E0E0E0;
  --el-green:  #A8DC8E;  --el-green-b:  #8CCB6E;
  --el-blue:   #8FC4EE;  --el-blue-b:   #6FAEE3;
  --el-yellow: #F4DC72;  --el-yellow-b: #E6C948;
  --el-orange: #F5BC7E;  --el-orange-b: #E9A55C;
  --el-red:    #F2A19E;  --el-red-b:    #E6817D;
  --el-purple: #C4A9E8;  --el-purple-b: #AE8FDC;
  --el-grey:   #D2D2D2;  --el-grey-b:   #BEBEBE;

  /* Radien & Schatten */
  --r-card: 4px;  --r-column: 6px;  --r-tool: 8px;
  --shadow-card:  0 1px 2px rgba(0,0,0,.06);
  --shadow-drag:  0 8px 24px rgba(0,0,0,.18);
  --shadow-panel: 0 4px 16px rgba(0,0,0,.12);

  /* Strichfarben für Linien und Freihand (Phase 2c).
     Die Flächen-Token sind als Striche zu hell; dies sind die gedeckten
     Gegenstücke desselben Achttons-Satzes. "white" ist die neutrale Tinte.
     Eine vom Nutzer gewählte Farbe (Hexwert in element.color) wird direkt als
     Strich benutzt — für sie gibt es kein gedecktes Gegenstück, und sie ist
     bereits die bewusste Wahl des Nutzers. */
  --ink-white:  #2A2A2A;
  --ink-green:  #5F8C3E;
  --ink-blue:   #3A72A8;
  --ink-yellow: #B08A15;
  --ink-orange: #C2712C;
  --ink-red:    #C0504C;
  --ink-purple: #7050A8;
  --ink-grey:   #7A7A7A;

  /* Rand einer frei gewählten Farbe: derselbe Ton, 12 % dunkler. Der Wert
     steht hier, weil er die Gestaltung der acht Token fortschreibt — die
     Farbe selbst ist Nutzdaten und steht im Element, nicht in den Tokens. */
  --el-custom-darken: 12%;

  /* Sonstiges */
  --grid-dot:   #D8D8D8;
  --danger:     #D9534F;
  --danger-bg:  #FBEDEC;
  --scrim:      rgba(0,0,0,.25);
  --ghost-bg:   rgba(255,255,255,.65);

  /* Typografie */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* Selektion — Kontur liegt außerhalb des Elements, Griffe sind rund.
     Alle Maße skalieren über --inv zoomunabhängig mit. */
  --sel-line:      2px;    /* Konturstärke */
  --sel-offset:    3px;    /* Abstand der Kontur zum Element */
  --sel-handle:    9px;    /* Durchmesser der Eckgriffe */
  --sel-handle-bd: 1px;    /* Randstärke der Griffe */
  --sel-fade:      100ms;  /* Ein- und Ausblenden */
  --shadow-handle: 0 1px 2px rgba(0,0,0,.15);
  /* Dieselbe Weichzeichnung als Filter — die gemalten Eckgriffe der
     Mehrfachauswahl sind Hintergrund und kennen kein box-shadow. */
  --shadow-handle-drop: drop-shadow(0 1px 2px rgba(0,0,0,.15));

  /* Strichstärken von Linie und Freihand sowie die Auswahlkontur, die ihrem
     Pfad folgt statt ihrer Bounding-Box. Diese Werte skalieren bewusst MIT
     dem Zoom (kein --inv): die Kontur soll den Strich begleiten, den sie
     umgibt, und der wird beim Hineinzoomen ebenfalls breiter. */
  --arrow-stroke:     2px;
  --arrow-stroke-sel: 2.5px;
  --sel-path-extra:   4px;  /* Kontur ist so viel breiter als der Strich */

  /* Hilfslinien beim Einrasten (Phase 4a). Sie liegen im Bildschirmraum und
     brauchen deshalb kein --inv: 1 px ist bei jedem Zoom 1 px. Die Farbe ist
     --line-focus, dieselbe wie die Auswahlkontur — es ist dieselbe Aussage
     ueber dieselbe Auswahl. */
  --guide-line:    1px;    /* Strichstaerke der Hilfslinie */
  --guide-tick:    4px;    /* halbe Laenge der Endstriche eines Abstands-Guides */

  /* Maße */
  --topbar-h: 48px;  --titlebar-h: 56px;  --rail-w: 64px;
  --rail-insp-w: 200px; /* Rail im Inspector-Modus (ARCHITEKTUR-v2 §3) */
  --sidebar-w: 264px;   /* Board-Baum, Favoriten, Papierkorb (Phase 3) */
  --hit-fade: 2000ms;   /* Hervorhebung eines Suchtreffers */

  /* Übergangsdauer des linken Chrome (Phase 3f). Seitenleiste, Rail und
     Viewport sind Kinder eines Flex-Containers; ihre Breitenänderung läuft
     über diese Zeit. render/viewport.js liest den Wert, um das gecachte
     Viewport-Rechteck währenddessen mitzuführen — der Wert steht deshalb
     genau einmal hier und nicht zusätzlich im Skript. */
  --chrome-move: 120ms;
  /* Ab dieser Fensterbreite haben Seitenleiste (264) + Inspector (200) +
     rund 640 px Arbeitsfläche nebeneinander Platz. Darunter weicht die
     Seitenleiste, solange der Inspector offen ist (ui/sidebar.js). */
  --chrome-schwelle: 1100px;
}