/**
 * Project shell (Zieldesign Konfiguration 2026-10-20): shared design tokens.
 * Colours, radii, type and geometry follow the binding mockup
 * Zieldesign-Konfiguration-2026-10-20.html exactly (dark). Light/dark follow the
 * system setting (prefers-color-scheme, Till 20.10.2026): the light block below is
 * the matching EE-style light variant and switches live. Every shell stylesheet
 * (header, map toolbar/edge, config panel/inspector, sun bar) uses ONLY these variables.
 * color-scheme is set on the shell containers only, so module widgets outside the
 * shell keep their own form-control look.
 */
:root {
  /* geometry contract (see docs/project-shell.md), mockup: header top 14, sides 16,
     header 56 high, zones below at 82, left panel 340, inspector 360 */
  --ees-gap: 16px;
  --ees-header-top: 14px;
  --ees-header-h: 56px;
  --ees-top: calc(var(--ees-header-top) + var(--ees-header-h) + 12px); /* first row below the header */
  --ees-left-w: 340px;
  --ees-right-w: 360px;
  --ees-radius: 14px;        /* toolbar, popover */
  --ees-radius-sm: 8px;      /* buttons, fields */
  --ees-radius-md: 12px;     /* cards, legend, map nav */
  --ees-radius-lg: 16px;     /* header, sun bar */
  --ees-radius-panel: 20px;  /* left panel, inspector */
  --ees-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  /* dark (mockup --bg/--glass/--bd/--t*) */
  --ees-bg: #0a0a0f;
  --ees-surface: rgba(17, 19, 25, 0.94);
  --ees-surface-2: rgba(255, 255, 255, 0.04);
  --ees-surface-3: rgba(255, 255, 255, 0.08);
  --ees-field: rgba(0, 0, 0, 0.28);          /* input fields (mockup .val) */
  --ees-menu-bg: #14161c;                    /* native select options */
  --ees-border: rgba(255, 255, 255, 0.10);
  --ees-border-strong: rgba(255, 255, 255, 0.16);
  --ees-text: #ffffff;
  --ees-text-2: rgba(255, 255, 255, 0.88);
  --ees-text-dim: rgba(255, 255, 255, 0.76);   /* AA over the glass (was 0.52) */
  --ees-text-faint: rgba(255, 255, 255, 0.56); /* decoration / disabled only, >= 3:1 */
  --ees-accent: #3FA14D;
  --ees-accent-strong: #30d158;
  --ees-accent-soft: rgba(63, 161, 77, 0.18);
  --ees-accent-text: #ffffff;
  --ees-warn: #ff9f0a;
  --ees-warn-soft: rgba(255, 159, 10, 0.10);   /* reset button (mockup .rst) */
  --ees-danger: #ff453a;
  --ees-info: #0a84ff;
  --ees-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ees-float-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);   /* floating capsules (sun bar, flash) */
  --ees-backdrop: blur(32px) saturate(180%);

  /* Glass (2.25.713, Till 20.10.2026 "Richtung Glas-Design wie bei den Widgets, damit es
     einheitlich ist"): the module widgets' look (ee-widget-styles.css .ee-widget: 165deg
     white sheen, 1px white border, soft shadow stack with inset highlights, blur + saturate)
     over a tint that keeps text readable on ANY map below (satellite, street map, snow).
     The tint is the only extra: tests/js/ee-shell-glass-contrast.test.cjs checks WCAG AA
     (4.5:1) for --ees-text, --ees-text-2 and --ees-text-dim against the worst backdrop.
     Every floating zone (header, left panel, inspector, toolbar, popovers, map edge, sun bar,
     legend, map labels, dialogs) uses these and nothing else. */
  --ees-glass-tint: rgba(16, 18, 24, 0.78);
  --ees-glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.06) 100%);
  --ees-glass-bg: var(--ees-glass-sheen), linear-gradient(var(--ees-glass-tint), var(--ees-glass-tint));
  --ees-glass-border: rgba(255, 255, 255, 0.12);
  --ees-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  --ees-glass-solid: rgba(17, 19, 25, 0.96);   /* no backdrop-filter / reduced transparency */

  /* panel heights (2.25.713, Till "die Kaesten rechts und links nicht so hoch, damit sie sich
     nicht ueberlagern"): side panels end above the sun bar row, height follows the content */
  --ees-sunbar-h: 52px;
  --ees-bottom-reserve: calc(var(--ees-gap) * 2 + var(--ees-sunbar-h));
  --ees-toolbar-h: 60px;
  --ees-side-top: var(--ees-top);   /* first row of the side panels (below the toolbar when narrow) */
  --ees-panel-max-h: calc(100vh - var(--ees-side-top) - var(--ees-bottom-reserve));

  /* sun bar (mockup .sunic .knob .track) */
  --ees-sun: #ffd60a;
  --ees-knob: #ffffff;
  --ees-sky-night: #1e293b;
  --ees-sky-dusk: #f59e0b;
  --ees-sky-day: #fde68a;

  /* origin badges K/P/F/B/M (mockup .oK .oP .oF .oB .oM), S = system default */
  --ees-badge-k: rgba(90, 200, 250, 0.18);  --ees-badge-k-fg: #8fdcff;
  --ees-badge-p: rgba(255, 255, 255, 0.12); --ees-badge-p-fg: #e6e6e6;
  --ees-badge-f: rgba(255, 159, 10, 0.20);  --ees-badge-f-fg: #ffc266;
  --ees-badge-b: rgba(167, 139, 250, 0.20); --ees-badge-b-fg: #c9b8ff;
  --ees-badge-m: rgba(48, 209, 88, 0.18);   --ees-badge-m-fg: #8ef0a8;
  --ees-badge-s: rgba(255, 255, 255, 0.08); --ees-badge-s-fg: rgba(255, 255, 255, 0.70);
}

.ees-header, .ees-left, .ees-inspector, .ees-toolbar-wrap, .ees-mapedge, .ees-sunbar,
.ees-variant-menu, .ees-dialog-backdrop, #layerLegendContainer {
  color-scheme: dark;
}

/* light variant: system setting "light" (same geometry, EE-style light colours) */
@media (prefers-color-scheme: light) {
  :root {
    --ees-bg: #f3f5f4;
    --ees-surface: rgba(255, 255, 255, 0.94);
    --ees-surface-2: rgba(16, 32, 24, 0.04);
    --ees-surface-3: rgba(16, 32, 24, 0.08);
    --ees-field: rgba(16, 32, 24, 0.05);
    --ees-border: rgba(16, 32, 24, 0.12);
    --ees-border-strong: rgba(16, 32, 24, 0.22);
    --ees-text: #15211b;
    --ees-text-2: rgba(21, 33, 27, 0.88);
    --ees-text-dim: rgba(21, 33, 27, 0.70);   /* AA over the glass (was 0.62) */
    --ees-text-faint: rgba(21, 33, 27, 0.52);
    --ees-accent: #2f9e44;
    --ees-accent-strong: #23863a;
    --ees-accent-soft: rgba(47, 158, 68, 0.14);
    --ees-accent-text: #ffffff;
    --ees-warn: #c26f00;
    --ees-danger: #d6453a;
    --ees-info: #1f6fc4;
    --ees-shadow: 0 6px 24px rgba(16, 32, 24, 0.14);
    --ees-float-shadow: 0 8px 28px rgba(16, 32, 24, 0.16);
    --ees-backdrop: blur(32px) saturate(180%);
    --ees-glass-tint: rgba(255, 255, 255, 0.82);
    --ees-glass-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.20) 40%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0.25) 100%);
    --ees-glass-border: rgba(16, 32, 24, 0.10);
    --ees-glass-shadow: 0 4px 16px rgba(16, 32, 24, 0.08), 0 8px 32px rgba(16, 32, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 0 rgba(16, 32, 24, 0.05);
    --ees-glass-solid: rgba(255, 255, 255, 0.97);
    --ees-sun: #e0a800;
    --ees-knob: #ffffff;
    --ees-sky-night: #cbd5e1;
    --ees-sky-dusk: #f59e0b;
    --ees-sky-day: #fcd34d;
    --ees-badge-k: rgba(2, 132, 199, 0.14);  --ees-badge-k-fg: #075985;
    --ees-badge-p: rgba(16, 32, 24, 0.08);   --ees-badge-p-fg: #33413a;
    --ees-badge-f: rgba(234, 140, 0, 0.16);  --ees-badge-f-fg: #8a4b00;
    --ees-badge-b: rgba(124, 58, 237, 0.12); --ees-badge-b-fg: #5b21b6;
    --ees-badge-m: rgba(22, 163, 74, 0.14);  --ees-badge-m-fg: #166534;
    --ees-badge-s: rgba(16, 32, 24, 0.06);   --ees-badge-s-fg: rgba(21, 33, 27, 0.72);
  }
  .ees-header, .ees-left, .ees-inspector, .ees-toolbar-wrap, .ees-mapedge, .ees-sunbar,
  .ees-variant-menu, .ees-dialog-backdrop, #layerLegendContainer {
    color-scheme: light;
  }
}

/* no backdrop-filter (old browsers) or "reduce transparency" (macOS/iOS setting):
   the same glass, opaque, so text never sits on a busy map */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --ees-glass-tint: var(--ees-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --ees-glass-tint: var(--ees-glass-solid); --ees-backdrop: none; }
}

/* Below 1440 px the toolbar (about 660 px wide) does not fit between the two panels (left 340 + inspector 360):
   it gets its own row above them, the panels start below it (ee-shell-map.css centres it). */
@media (min-width: 768px) and (max-width: 1439px) {
  :root { --ees-side-top: calc(var(--ees-top) + var(--ees-toolbar-h) + 10px); }
}

@media (max-width: 767px) {
  :root {
    --ees-gap: 8px;
    --ees-header-top: 8px;
    --ees-header-h: 96px;   /* two rows: project + KPIs, module segments (scrollable) */
    --ees-left-w: 100vw;
    --ees-right-w: 100vw;
  }
}