/* JEHNEN Platform design tokens - the one place for the palette, the fonts and the spacing
   scale. Loaded before app.css (base.html) and before kiosk.css (kiosk.html); neither keeps a
   copy. Day / night: the header switch (static/theme.js) sets data-theme="light|dark" on
   <html>, static/theme-init.js restores the stored choice before the first paint. Without a
   choice the system setting decides (the media query skips an explicit light). Public
   customer pages carry data-theme="light" fixed. Keep the two dark blocks identical. */
:root {
  --ground: #E9EBE8; --panel: #EEF0ED; --ink: #111419; --ink-2: #3B424B; --rule: #CDD1CF;
  /* Look "Ruhig + Farbe" (Okt 2026): white section cards and status colours as soft pills */
  --surface: #FFFFFF; --surface-shadow: 0 1px 2px rgba(17, 20, 25, .06);
  --ok-bg: #E3F3E9; --ok-fg: #17603A; --warn-bg: #FDF1D8; --warn-fg: #8A5A00;
  --danger-bg: #FBE5E2; --danger-fg: #B3261E; --accent-bg: #E6E9FD; --accent-fg: #1F33C9;
  --neutral-bg: #EEF0F2; --edge-1: #2438E8; --edge-2: #E89A12; --edge-3: #1B8A50; --edge-4: #7A4FD6;
  --accent: #2438E8; --accent-ink: #FFFFFF; --led: #E89A12; --field: #F6F7F5;
  --ok: #1B5E3A; --warn: #8A5A00; --danger: #C43B2B;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* aliases older rules still use */
  --bg: var(--ground); --card: var(--panel); --text: var(--ink); --muted: var(--ink-2); --line: var(--rule); --tint: var(--field);
  /* derived greys: one hairline, one tint - instead of ad-hoc color-mix values */
  --hair: color-mix(in srgb, var(--ink) 8%, transparent);
  --wash: color-mix(in srgb, var(--ink) 4%, transparent);
  /* spacing scale (T8): 4 · 8 · 12 · 16 · 24 · 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* header height, used by sticky elements */
  --header-h: 53px;
  color-scheme: light; --shadow: rgba(0,0,0,.18); --metal: 1;
  --led-lens: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 .8px, rgba(255,255,255,0) 2px), radial-gradient(circle at 50% 58%, #6E7A8C 0, #3E4756 55%, #262C36 100%);
  --led-halo: 0 0 0 0 transparent;
}
:root[data-theme="dark"] { color-scheme: dark;
  --ground: #101317; --panel: #171B21; --ink: #E7EAEC; --ink-2: #98A1AC; --rule: #2A3038;
  --accent: #7D8BFF; --accent-ink: #0B0E14; --led: #F2A93B; --field: #12161B;
  --ok: #8BE0A8; --warn: #F6CF86; --danger: #FF8A80; --shadow: rgba(0,0,0,.55);
  --surface: #1A1F26; --surface-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --ok-bg: rgba(139, 224, 168, .14); --ok-fg: #8BE0A8; --warn-bg: rgba(246, 207, 134, .14); --warn-fg: #F6CF86;
  --danger-bg: rgba(255, 138, 128, .14); --danger-fg: #FF8A80; --accent-bg: rgba(125, 139, 255, .16); --accent-fg: #A9B3FF;
  --neutral-bg: rgba(255, 255, 255, .06); --edge-1: #7D8BFF; --edge-2: #F2A93B; --edge-3: #5FCB8C; --edge-4: #B59CFF;
  --metal: .84;
  --led-lens: radial-gradient(circle at 36% 30%, #FFFFFF 0 1px, rgba(255,255,255,0) 2.4px), radial-gradient(circle at 50% 50%, #EEF3FF 0, #9DB8FF 26%, #4D7CFF 58%, #1F44D6 100%);
  --led-halo: 0 0 3px 1px rgba(77,124,255,.95), 0 0 10px 3px rgba(77,124,255,.55), 0 0 22px 7px rgba(77,124,255,.22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --ground: #101317; --panel: #171B21; --ink: #E7EAEC; --ink-2: #98A1AC; --rule: #2A3038;
    --accent: #7D8BFF; --accent-ink: #0B0E14; --led: #F2A93B; --field: #12161B;
    --ok: #8BE0A8; --warn: #F6CF86; --danger: #FF8A80; --shadow: rgba(0,0,0,.55);
  --surface: #1A1F26; --surface-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --ok-bg: rgba(139, 224, 168, .14); --ok-fg: #8BE0A8; --warn-bg: rgba(246, 207, 134, .14); --warn-fg: #F6CF86;
  --danger-bg: rgba(255, 138, 128, .14); --danger-fg: #FF8A80; --accent-bg: rgba(125, 139, 255, .16); --accent-fg: #A9B3FF;
  --neutral-bg: rgba(255, 255, 255, .06); --edge-1: #7D8BFF; --edge-2: #F2A93B; --edge-3: #5FCB8C; --edge-4: #B59CFF;
    --metal: .84;
    --led-lens: radial-gradient(circle at 36% 30%, #FFFFFF 0 1px, rgba(255,255,255,0) 2.4px), radial-gradient(circle at 50% 50%, #EEF3FF 0, #9DB8FF 26%, #4D7CFF 58%, #1F44D6 100%);
    --led-halo: 0 0 3px 1px rgba(77,124,255,.95), 0 0 10px 3px rgba(77,124,255,.55), 0 0 22px 7px rgba(77,124,255,.22); }
}