/* ═══════════════════════════════════════════════════════════════════════════
   XLUX Site Manager — Design Tokens
   Source of truth: the hub webapp (XLUX-MAIN-MCU/data/webui/style.css).
   Values are copied 1:1 — the portal and the webapp are ONE design family.
   Reference snapshots: _webapp-root-tokens.css / _webapp-light-tokens.css.
   Rules (memory kundenportal-qualitaetsanspruch / 23-regeln-ui-standards):
   never hardcode a color in components — always route through these tokens;
   light mode = token overrides only, components stay theme-agnostic.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── App backgrounds ── */
  --app-bg:           #0a0a0b;
  --panel-bg:         #121214;
  --setting-panel:    #1c1c1e;
  --surface-elevated: #1f1f22;
  --surface-sunken:   #161618;
  --surface-chip:     #2c2c2e;
  --surface-overlay:  rgba(12,12,15,0.97);

  /* ── Surfaces / layers ── */
  --surface-hover:    rgba(255,255,255,0.04);
  --surface-active:   rgba(255,255,255,0.08);
  --surface-raised:   rgba(255,255,255,0.12);
  --surface-1:        rgba(255,255,255,0.06);
  --surface-2:        rgba(255,255,255,0.04);

  /* ── Borders ── */
  --border:           rgba(255,255,255,0.1);
  --border-subtle:    rgba(255,255,255,0.06);
  --border-light:     rgba(255,255,255,0.08);
  --border-medium:    rgba(255,255,255,0.1);
  --border-strong:    rgba(255,255,255,0.18);

  /* ── Text hierarchy ── */
  --text-primary:     #ffffff;
  --text-soft:        rgba(255,255,255,0.65);
  --text-dim:         rgba(255,255,255,0.55);
  --text-secondary:   rgba(255,255,255,0.45);
  --text-muted:       rgba(255,255,255,0.35);
  --text-hint:        rgba(255,255,255,0.25);
  --text-disabled:    rgba(255,255,255,0.18);
  --text-faint:       rgba(255,255,255,0.30);
  --text-regular:     rgba(255,255,255,0.40);
  --text-medium:      rgba(255,255,255,0.50);
  --text-strong:      rgba(255,255,255,0.60);
  --text-bright:      rgba(255,255,255,0.80);
  --text-on-accent-soft: rgba(255,255,255,0.82);

  /* ── Accent (webapp: purple in dark) ── */
  --clr-accent:       #a78bfa;
  --clr-accent-bg:    rgba(167,139,250,0.12);
  --clr-accent-bd:    rgba(167,139,250,0.25);
  --clr-accent-sel:   rgba(167,139,250,0.45);

  /* ── Status ── */
  --clr-ok:           #34d399;
  --clr-warn:         #fde047;
  --clr-error:        #f87171;
  --clr-info:         #60a5fa;
  /* status colors as RUNNING TEXT (yellow/red text needs darker shades on light bg) */
  --clr-warn-text:    var(--clr-warn);
  --clr-error-text:   var(--clr-error);

  /* ── Extended accent palette (webapp style.css — device glyph accents used by
     FIXTURE_TYPES / SENSOR_CARD_ICONS in device-icon.js) ── */
  --gray-500:         #6b7280;
  --clr-ok-soft:      #86efac; /* green-300 */
  --clr-amber:        #fbbf24; /* amber-400 (NOT --clr-warn) */
  --clr-orange:       #fb923c; /* orange-400 */
  --clr-cyan-soft:    #67e8f9; /* cyan-300 */
  --clr-indigo:       #818cf8; /* indigo-400 — neutral fallback accent */
  --slate-500:        #64748b; /* disabled/planned */

  /* ── Protocol / feature colors (mirror CONNECT_COLORS, constants.js) ── */
  --clr-cloud:        #5eead4;
  --clr-zigbee:       #fca5a5;
  --clr-dmx:          #93c5fd;
  --clr-dali:         #c4b5fd;
  --clr-wled:         #fef08a;
  --clr-mqtt:         #6ee7b7;
  --clr-osc:          #f9a8d4;
  --clr-tcnet:        #fdba74;

  /* ── Primary button (webapp: white on dark, accent on light) ── */
  --btn-primary-bg:   #ffffff;
  --btn-primary-fg:   #000000;

  /* ── Layout ── */
  --radius-card:      14px;
  --radius-sheet:     24px;
  --gap-section:      20px;

  /* ── Portal-specific (new tokens, both themes below) ── */
  --nav-h:            68px;                 /* bottom nav height — 1:1 webapp #bottom-nav */
  --header-h:         56px;
  --content-max:      1120px;               /* desktop content width */
  --cloud-grad:       linear-gradient(to bottom right, #14b8a6, #0891b2); /* CONNECT_COLORS.cloud */
}

/* ── Light theme — token overrides only (values 1:1 from the webapp) ── */
[data-theme="light"] {
  --app-bg:           #f5f5f7;
  --panel-bg:         #ffffff;
  --setting-panel:    #f1f1f4;
  --surface-elevated: #fafafb;
  --surface-sunken:   #ffffff;
  --surface-chip:     #e9e9ee;
  --surface-overlay:  rgba(255,255,255,0.98);

  --surface-hover:    rgba(0,0,0,0.04);
  --surface-active:   rgba(0,0,0,0.08);
  --surface-raised:   rgba(0,0,0,0.10);
  --surface-1:        rgba(0,0,0,0.05);
  --surface-2:        rgba(0,0,0,0.03);

  --border:           rgba(0,0,0,0.1);
  --border-subtle:    rgba(0,0,0,0.05);
  --border-light:     rgba(0,0,0,0.07);
  --border-medium:    rgba(0,0,0,0.1);
  --border-strong:    rgba(0,0,0,0.18);

  --text-primary:     #0f0f0f;
  --text-soft:        rgba(0,0,0,0.65);
  --text-dim:         rgba(0,0,0,0.55);
  --text-secondary:   rgba(0,0,0,0.45);
  --text-muted:       rgba(0,0,0,0.35);
  --text-hint:        rgba(0,0,0,0.25);
  --text-disabled:    rgba(0,0,0,0.18);
  --text-faint:       rgba(0,0,0,0.30);
  --text-regular:     rgba(0,0,0,0.40);
  --text-medium:      rgba(0,0,0,0.50);
  --text-strong:      rgba(0,0,0,0.60);
  --text-bright:      rgba(0,0,0,0.80);

  --clr-accent:       #7c3aed;
  --clr-accent-bg:    rgba(124,58,237,0.08);
  --clr-accent-bd:    rgba(124,58,237,0.2);
  --clr-accent-sel:   rgba(124,58,237,0.35);

  --clr-warn-text:    #a16207;
  --clr-error-text:   #dc2626;

  /* Extended accent palette in light — same values as the webapp's light theme. */
  --gray-500:         #4b5563;
  --clr-ok-soft:      #22c55e; /* green-500 */
  --clr-amber:        #b45309; /* amber-700 — matches the webapp's light --clr-warn */
  --clr-orange:       #c2410c; /* orange-700 */
  --clr-cyan-soft:    #0e7490; /* cyan-700 */
  --clr-indigo:       #4f46e5; /* indigo-600 */
  --slate-500:        #475569; /* slate-600 */

  --btn-primary-bg:   var(--clr-accent);
  --btn-primary-fg:   #ffffff;
}