/*! Copyright (c) 2025-2026 Markus Schüssler. All rights reserved.
 * SPDX-License-Identifier: LicenseRef-Markus-Schuessler-Proprietary; see repository LICENSE.
 */
:root {
  color-scheme: light;
  --ui-font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  /* Snow, stone and glacier blue: semantic colors shared across routes. */
  --ui-color-bg: #f1f4f3;
  --ui-color-surface: #ffffff;
  --ui-color-surface-alt: #f6f8f7;
  --ui-color-surface-hover: #eaf1f2;
  --ui-color-nav: #f7f9f8;
  --ui-color-border: #d2ddde;
  --ui-color-border-strong: #adbec2;
  --ui-color-text: #172b33;
  --ui-color-text-muted: #536a73;
  --ui-color-text-secondary: #627981;
  --ui-color-primary: #176b86;
  --ui-color-primary-strong: #10536a;
  --ui-color-on-primary: #ffffff;
  --ui-color-accent: #3e8fa5;
  --ui-color-primary-soft: rgba(23, 107, 134, 0.1);
  --ui-color-map-active: #46680d;
  --ui-color-map-active-surface: #e7efd9;
  --ui-color-map-active-border: #718b3a;
  --ui-color-success: #176b86;
  --ui-color-warning: #a4611c;
  --ui-color-admin: #a94b00;
  --ui-color-danger: #b63e3e;
  --ui-color-info: #176b86;
  --ui-color-focus: #176b86;
  --ui-shadow-color: rgba(23, 43, 51, 0.1);
  --ui-shadow-overlay: 0 8px 24px rgba(23, 43, 51, 0.16);
  --ui-radius-sm: 4px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 8px;
  --ui-radius-overlay: 10px;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-control-height: 2.5rem;
  --ui-control-height-compact: 2.25rem;
  --ui-panel-padding: 1rem;
  --ui-panel-padding-compact: 0.75rem;
  --ui-section-gap: 1.25rem;
  --ui-page-gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --ui-touch-target: 2.75rem;
  --ui-font-size-meta: 0.75rem;
  --ui-font-size-body: 0.875rem;
  --ui-font-size-item: 1rem;
  --ui-font-size-section: 1.25rem;
  --ui-font-size-page: clamp(1.5rem, 2vw, 2rem);
}
:root[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --ui-color-bg: #101b21;
  --ui-color-surface: #17262d;
  --ui-color-surface-alt: #1e3037;
  --ui-color-surface-hover: #294049;
  --ui-color-nav: #14232a;
  --ui-color-border: #38515a;
  --ui-color-border-strong: #5b747e;
  --ui-color-text: #e8f0f0;
  --ui-color-text-muted: #a4b9bf;
  --ui-color-text-secondary: #c1cfd1;
  --ui-color-primary: #83c9da;
  --ui-color-primary-strong: #a7dbe5;
  --ui-color-on-primary: #10232b;
  --ui-color-accent: #77b5c5;
  --ui-color-primary-soft: rgba(131, 201, 218, 0.16);
  --ui-color-map-active: #b2cf2d;
  --ui-color-map-active-surface: #294049;
  --ui-color-map-active-border: #8ca52b;
  --ui-color-success: #75c5a1;
  --ui-color-warning: #efc076;
  --ui-color-admin: #ffb56b;
  --ui-color-danger: #f0a5a1;
  --ui-color-info: #83c9da;
  --ui-color-focus: #a7dbe5;
  --ui-shadow-color: rgba(0, 0, 0, 0.28);
  --ui-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}