u

src/index.css

@@ -1,11 +1,13 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-alpine.css';
 
+/* App background. Provided as a CSS custom property by src/colors.js
+   (installCssVars), with a hard-coded fallback for the very first paint. */
 html,
 body,
 #root {
   min-height: 100%;
-  background-color: #85b7ad;
+  background-color: var(--df-main-background, #82b8b4);
 }
 
 html,
@@ -14,20 +16,60 @@ body {
   touch-action: manipulation;
 }
 
+/* ────────────────────────────────────────────────────────────────────────────
+ * SYSTEM-WIDE SPELLCHECK OFF
+ *
+ * dashfront is a German ERP/POS for article numbers, EANs, SKUs and quantities.
+ * None of that vocabulary exists in any dictionary, so a spellchecker only ever
+ * paints red squiggles and slows typing. Every editable surface must therefore
+ * opt out — including inputs the app does not own (ag-grid filter boxes, and
+ * any input a browser or extension injects into the page).
+ *
+ * The `spellcheck` content attribute is the only switch: it is the default for
+ * every <input>/<textarea>, and browsers honour it as a presentational hint
+ * regardless of the element's own attribute.
+ *
+ * `TextInput` (src/components/TextInput.jsx) additionally sets spellCheck=false
+ * per input, which covers fields React re-renders. This rule is the backstop
+ * that also covers DOM we do not create.
+ * ──────────────────────────────────────────────────────────────────────────── */
+input,
+textarea,
+[contenteditable] {
+  spellcheck: false;
+}
+
 html {
   scrollbar-gutter: stable;
 }
 
-/* SortableJS: Kategorie-Reorder im Edit-Modus */
+/* SortableJS: Kategorie-Reorder im Edit-Modus.
+   Colors come from CSS custom properties injected by src/colors.js
+   (installCssVars), so this file stays in sync with the JS token module.
+   Plain CSS cannot import the JS module directly. */
 .sortable-ghost {
-  outline: 2px dashed #2e7d32;
+  opacity: 0.35 !important;
+  outline: 2px dashed var(--df-sort-ghost, #15803d);
   outline-offset: 2px;
-  background-color: rgba(46, 125, 50, 0.12) !important;
+  background-color: var(--df-sort-ghost-tint, rgba(21, 128, 61, 0.12)) !important;
+}
+
+.sortable-chosen {
+  box-shadow: var(--df-shadow-sortable, 0 4px 16px rgba(15, 23, 42, 0.12));
+}
+
+.drag-handle {
+  cursor: grab;
+  touch-action: none;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
 }
 
 .sortable-drag {
   opacity: 1 !important;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
+  box-shadow: var(--df-shadow-drag, 0 8px 20px rgba(15, 23, 42, 0.28));
   cursor: grabbing !important;
   user-select: none !important;
 }