/* ═══════════════════════════════════════════════════════════════════════════
   XLUX Admin Panel — Design Tokens
   Source of truth: the hub webapp (XLUX-MAIN-MCU/data/webui/style.css).
   Values are copied 1:1 via the customer-portal tokens — ONE design family.
   Rules: 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);
  --fg-on-solid:      #ffffff; /* on saturated fills — never theme-overridden */

  /* ── Accent (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;
  --clr-warn-text:    var(--clr-warn);
  --clr-error-text:   var(--clr-error);
  --clr-amber:        #fbbf24; /* amber-400 — degraded/offline (NOT --clr-warn) */
  --clr-amber-strong: #f59e0b;
  --clr-ok-strong:    #22c55e;
  --clr-error-strong: #ef4444;
  --clr-indigo:       #818cf8;
  --gray-500:         #6b7280;
  --slate-400:        #94a3b8;
  --slate-500:        #64748b;

  /* ── Protocol / feature colors (mirror CONNECT_COLORS) ── */
  --clr-cloud:        #5eead4;
  --clr-zigbee:       #fca5a5;
  --clr-dmx:          #93c5fd;
  --clr-dali:         #c4b5fd;
  --clr-wled:         #fef08a;
  --clr-mqtt:         #6ee7b7;

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

  /* ── Scrim (dimmed backdrop behind every layer) ── */
  --scrim:            rgba(0,0,0,.65);
  --scrim-strong:     rgba(0,0,0,.72);

  /* ══ STACKING ORDER — the only place that assigns a z-index.
     Layers declare a ROLE, never a number (hub rule). ══ */
  --z-nav:            80;
  --z-topbar:         70;
  --z-layer:          100;
  --z-dialog:         200;
  --z-toast:          600;

  /* ── Layout ── */
  --radius-card:      14px;
  --radius-sheet:     24px;
  --gap-section:      20px;
  --nav-h:            68px;   /* bottom nav — 1:1 webapp #bottom-nav */
  --content-max:      1120px; /* desktop content width */
}

/* ── Light theme — token overrides only (values 1:1 from the webapp) ── */
[data-theme="light"] {
  --app-bg:           #f5f5f7;
  --panel-bg:         #ffffff;
  --setting-panel:    #ffffff; /* hub UniFi-phase: cards go pure white in light */
  --surface-elevated: #ffffff;
  --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);

  /* Light accent = UniFi blue (current hub reality — EOF override phase §5b).
     Dark stays the product purple. */
  --clr-accent:       #2e90fa;
  --clr-accent-bg:    rgba(46,144,250,0.12);
  --clr-accent-bd:    rgba(46,144,250,0.28);
  --clr-accent-sel:   rgba(46,144,250,0.42);

  /* Status on white: drop 2–3 Tailwind steps to the dark end. */
  --clr-ok:           #059669;
  --clr-warn:         #b45309;
  --clr-error:        #dc2626;
  --clr-info:         #2563eb;
  --clr-warn-text:    #a16207;
  --clr-error-text:   #dc2626;
  --clr-amber:        #b45309;
  --clr-amber-strong: #92400e;
  --clr-ok-strong:    #15803d;
  --clr-error-strong: #b91c1c;
  --clr-indigo:       #4f46e5;
  --gray-500:         #4b5563;
  --slate-400:        #64748b;
  --slate-500:        #475569;

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

  --scrim:            rgba(0,0,0,.38);
  --scrim-strong:     rgba(0,0,0,.46);
}