:root {
  --petrol-950: #002a2d;
  --petrol-900: #003a3e;
  --petrol-800: #004a4f;
  --petrol-700: #005a60;
  --petrol-600: #00777f;
  --petrol-500: #1a8990;
  --petrol-400: #4aa6ac;
  --petrol-300: #84c4c8;
  --petrol-200: #bce0e2;
  --petrol-100: #e1f1f2;
  --petrol-50:  #f1f8f9;

  --ink-950: #0c1413;
  --ink-900: #15201f;
  --ink-800: #243231;
  --ink-700: #364746;
  --ink-600: #4d6160;
  --ink-500: #6a7d7c;
  --ink-400: #8d9d9c;
  --ink-300: #b4c0bf;
  --ink-200: #d6dedd;
  --ink-100: #e9efee;
  --ink-50:  #f5f8f7;
  --white:   #ffffff;

  --strom: #f0a800;
  --strom-soft: #fdf3d6;
  --gas: #2f7fd1;
  --gas-soft: #e4effb;

  --success: #2e8b57;
  --success-soft: #e3f3ea;
  --warning: #d98a0b;
  --warning-soft: #fbf0d8;
  --danger:  #c0392b;
  --danger-soft: #fae6e3;
  --info: var(--petrol-600);
  --info-soft: var(--petrol-100);

  --console-bg:     var(--ink-950);
  --console-border: var(--ink-800);
  --console-time:   var(--ink-400);
  --console-text:   var(--ink-100);   /* Hinweis */
  --console-debug:  var(--ink-400);
  --console-error:  #f06b5e;
  --console-warn:   #f5ab1a;
  --console-event:  var(--petrol-300);
  --console-down:   #7ee2a8;          /* Datenverkehr: vom Netz zum Gerät */
  --console-up:     #8ec5ff;          /* Datenverkehr: vom Gerät zum Netz */
  --console-switch: #d2a8ff;          /* Umstellung einer Schnittstelle */

  --chart-1: #2a78d6;  /* blau    */
  --chart-2: #008300;  /* grün    */
  --chart-3: #e87ba4;  /* magenta */
  --chart-4: #eda100;  /* gelb    */
  --chart-5: #1baf7a;  /* aqua    */
  --chart-6: #7c4dbe;  /* violett */

  --color-draft:      #3a6ea8;
  --color-draft-soft: #deeaf7;
  --color-depr:       #7b5299;
  --color-depr-soft:  #eee6f5;
  --color-wmbus:      #4a55a2;
  --color-wmbus-soft: #eef0fb;

  --env-devel: #7c4dbe;
  --env-devel-ink: #ffffff;
  --env-demo: #f5c842;
  --env-demo-stripe: #ecbb2c;
  --env-demo-ink: #000000;

  --obis-strom:          #e08c00;
  --obis-strom-soft:     rgba(224, 140, 0, 0.16);
  --obis-waerme:         #c0483e;
  --obis-waerme-soft:    rgba(192, 72, 62, 0.15);
  --obis-gas:            #2f7fd1;
  --obis-gas-soft:       rgba(47, 127, 209, 0.15);
  --obis-wasser:         #0e8ac4;
  --obis-wasser-soft:    rgba(14, 138, 196, 0.15);
  --obis-universal:      #64748b;
  --obis-universal-soft: rgba(100, 116, 139, 0.15);

  color-scheme: light;

  --surface-page:       var(--ink-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--ink-100);
  --surface-inverse:    var(--petrol-900);
  --surface-brand:      var(--petrol-600);
  --surface-brand-soft: var(--petrol-100);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-brand: var(--white);
  --text-inverse:  var(--white);
  --text-brand:    var(--petrol-600);
  --text-link:     var(--petrol-700);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-brand:   var(--petrol-600);

  --action-bg:        var(--petrol-600);
  --action-bg-hover:  var(--petrol-700);
  --action-bg-active: var(--petrol-800);
  --action-fg:        var(--white);
  --action-bg-muted:  var(--petrol-300);

  --focus-ring: var(--petrol-400);

  --font-display: var(--font-gotham, system-ui), -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-gotham, system-ui), -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --text-2xs:  0.6875rem;  /* 11px — Badges, Meta, Handbuch-Fließtext */
  --text-xs:   0.75rem;    /* 12px — Standard für Controls und Tabellen */
  --text-sm:   0.875rem;   /* 14px — Basisgröße von <body>, Seitentitel */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;

  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  --control-h:        32px;                    /* einheitliche Höhe ALLER Controls */

  --touch-h:          56px;                    /* Primäraktionen, Felder in Formularen am Telefon */
  --touch-h-sm:       44px;                    /* sekundäre Schalter, Listenzeilen, Icon-Buttons, Felder in Einstellungszeilen, alle Felder am Tablet */
  --touch-gap:        12px;                    /* Mindestabstand zwischen zwei Trefferflächen */
  --sidebar-bg:       #363636;                 /* Navigation, in Hell+Dunkel gleich; SICOSS: #002038 */
  --overlay:          rgba(10, 20, 18, 0.50);  /* Hintergrund hinter Modal/Drawer */
  --table-header-bg:  var(--surface-sunken);   /* Tabellenkopf: hell dunkler als die Zeilen … */
  --table-header-fg:  var(--text-subtle);

  --shadow-xs: 0 1px 2px rgba(12, 20, 19, 0.06);
  --shadow-sm: 0 1px 3px rgba(12, 20, 19, 0.08), 0 1px 2px rgba(12, 20, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 20, 19, 0.08), 0 2px 4px rgba(12, 20, 19, 0.04);
  --shadow-lg: 0 12px 28px rgba(12, 20, 19, 0.12), 0 4px 8px rgba(12, 20, 19, 0.05);
  --shadow-focus: 0 0 0 3px rgba(0, 119, 127, 0.28);

  --surface-hero: linear-gradient(135deg, #004a4f 0%, #00777f 60%, #1a8990 100%);
  --on-hero-text:        #ffffff;
  --on-hero-muted:       rgba(255, 255, 255, 0.75);
  --on-hero-fill:        rgba(255, 255, 255, 0.10);
  --on-hero-fill-strong: rgba(255, 255, 255, 0.14);
  --on-hero-line:        rgba(255, 255, 255, 0.22);
  --on-hero-line-strong: rgba(255, 255, 255, 0.45);
  --on-hero-band:        rgba(0, 0, 0, 0.16);
  --on-hero-live:        #7ee2b8;   /* der pulsierende Punkt „arbeitet" */
  --on-hero-ok:          #9ff0cc;   /* „in Ordnung" auf Petrol */
  --on-hero-bad:         #ffb4a8;   /* „fehlgeschlagen" auf Petrol */
  --on-hero-warn-fill:   rgba(255, 196, 0, 0.18);
  --on-hero-warn-line:   rgba(255, 214, 90, 0.45);
  --on-hero-alert-fill:  rgba(255, 196, 0, 0.30);
  --on-hero-alert-line:  #ffd65a;
  --on-hero-alert-icon:  #ffd65a;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:       #3a3a3a;
  --surface-card:       #484848;
  --surface-sunken:     #404040;
  --surface-inverse:    #f5f8f7;
  --surface-brand-soft: rgba(74, 166, 172, 0.15);

  --text-strong:   #f2f2f2;
  --text-body:     #e8e8e8;
  --text-muted:    #a8a8a8;
  --text-subtle:   #929292;
  --text-brand:    #4aa6ac;
  --text-link:     #84c4c8;
  --text-on-brand: #ffffff;
  --text-inverse:  #1a1a1a;

  --overlay:          rgba(0, 0, 0, 0.55);
  --table-header-bg:  #565656;            /* … dunkel HELLER als die Zeilen, sonst verschwindet der Kopf */
  --table-header-fg:  var(--text-body);

  --border-subtle:  rgba(255, 255, 255, 0.09);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong:  rgba(255, 255, 255, 0.27);
  --border-brand:   #4aa6ac;

  --action-bg:       #1a8990;
  --action-bg-hover: #1f9ea6;
  --action-fg:       #ffffff;
  --action-bg-muted: #2f6e72;             /* 60 % --action-bg auf --surface-card */

  --success:      #4dc882;
  --success-soft: rgba(77, 200, 130, 0.20);
  --warning:      #f5ab1a;
  --warning-soft: rgba(245, 171, 26, 0.20);
  --danger:       #f06b5e;
  --danger-soft:  rgba(240, 107, 94, 0.20);
  --info:         #4aa6ac;
  --info-soft:    rgba(74, 166, 172, 0.20);

  --chart-1: #3987e5;
  --chart-2: #008300;
  --chart-3: #d55181;
  --chart-4: #c98500;
  --chart-5: #199e70;
  --chart-6: #a07adb;

  --petrol-600: #4ec8d0;

  --color-draft:      #82b4e8;
  --color-draft-soft: rgba(82, 140, 210, 0.25);
  --color-depr:       #c490e8;
  --color-depr-soft:  rgba(160, 110, 200, 0.25);
  --color-wmbus:      #9098e0;
  --color-wmbus-soft: rgba(100, 115, 210, 0.25);

  --obis-strom:          #f0b64a;
  --obis-strom-soft:     rgba(240, 182, 74, 0.20);
  --obis-waerme:         #ec7d73;
  --obis-waerme-soft:    rgba(236, 125, 115, 0.22);
  --obis-gas:            #6aa9e8;
  --obis-gas-soft:       rgba(106, 169, 232, 0.22);
  --obis-wasser:         #4bb6df;
  --obis-wasser-soft:    rgba(75, 182, 223, 0.22);
  --obis-universal:      #9aa7ba;
  --obis-universal-soft: rgba(154, 167, 186, 0.20);

  --gas:      #5ab8f0;
  --gas-soft: rgba(65, 155, 230, 0.25);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.38), 0 4px 8px rgba(0, 0, 0, 0.22);
  --shadow-focus: 0 0 0 3px rgba(74, 166, 172, 0.35);
}

[data-brand="sicoss"] {
  --surface-brand:      #00a0e4;
  --surface-brand-soft: #dcf1fc;
  --text-brand:         #0086c2;
  --text-link:          #0071a8;
  --border-brand:       #00a0e4;
  --action-bg:          #00a0e4;
  --action-bg-hover:    #008fcc;
  --action-bg-active:   #0077ad;
  --action-bg-muted:    #80cff1;
  --focus-ring:         #5cc6f5;
  --shadow-focus:       0 0 0 3px rgba(0, 160, 228, 0.28);
  --info:               #00a0e4;
  --info-soft:          #dcf1fc;
  --sidebar-bg:         #002038;
  --console-event:      #7fcdf0;
}

[data-theme="dark"][data-brand="sicoss"] {
  --surface-brand-soft: rgba(0, 160, 228, 0.18);
  --text-brand:         #3cb8ee;
  --text-link:          #7dd0f5;
  --border-brand:       #3cb8ee;
  --action-bg:          #0090cf;
  --action-bg-hover:    #00a0e4;
  --action-bg-muted:    #1d7399;
  --info:               #00a0e4;
  --info-soft:          rgba(0, 160, 228, 0.18);
  --shadow-focus:       0 0 0 3px rgba(60, 184, 238, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }
input, select { font-family: var(--font-body); }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a9998' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 30px !important;
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234aa6ac' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}