/**
 * PaxDesign Design System — v7
 * Unified monochrome visual language (gradient chrome, glass surfaces, white accent).
 * Palette: #ffffff, #f3f6fd, #7e7e7e, #555555, #363636, #292929, #1b1b1b, #8b8b8b, #888888
 */

#pdx-root,
#pdx-panel,
#pdx-backdrop,
#pdx-notif,
.pdx-cmd-overlay,
.pdx-admin-wrap,
#pdx-auth-bar,
#pdx-auth-overlay,
#pdx-profile-overlay,
.pdx-cx-shell {
  --pdx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --pdx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pdx-radius-sm: 10px;
  --pdx-radius: 10px;
  --pdx-radius-lg: 16px;
  --pdx-ease: 0.3s ease;
  --pdx-ease-fast: 0.15s ease;
  --pdx-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --pdx-accent: #C2FF00;
  --pdx-accent-dim: rgba(194, 255, 0, 0.12);
  --pdx-accent-border: rgba(194, 255, 0, 0.35);
  --pdx-on-accent: #1b1b1b;
  --pdx-gradient-border: linear-gradient(to bottom right, #7e7e7e, #363636, #363636, #363636, #363636);
  --pdx-gradient-btn: linear-gradient(to top, #292929, #555555, #292929);
  --pdx-glow-radial: radial-gradient(
    ellipse at center,
    #ffffff,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0)
  );
}

/* Dark (default) */
#pdx-root[data-theme="dark"],
#pdx-root:not([data-theme]),
#pdx-panel,
#pdx-backdrop,
#pdx-notif,
.pdx-cmd-overlay {
  --pdx-bg: #1b1b1b;
  --pdx-bg-elev: rgba(0, 0, 0, 0.5);
  --pdx-bg-muted: #292929;
  --pdx-bg-hover: #363636;
  --pdx-border: #363636;
  --pdx-border-muted: #292929;
  --pdx-text: #ffffff;
  --pdx-text-muted: #8b8b8b;
  --pdx-text-subtle: #9a9a9a;
  --pdx-text-placeholder: #f3f6fd;
  --pdx-icon-idle: rgba(255, 255, 255, 0.1);
  --pdx-scrollbar: #888888;
  --pdx-scrollbar-hover: #555555;
  --pdx-danger: #888888;
  --pdx-warn: #7e7e7e;
  --pdx-success: #ffffff;
  --pdx-info: #8b8b8b;
}

/* Light — same palette, inverted hierarchy */
#pdx-root[data-theme="light"] {
  --pdx-bg: #f3f6fd;
  --pdx-bg-elev: #ffffff;
  --pdx-bg-muted: rgba(0, 0, 0, 0.04);
  --pdx-bg-hover: rgba(0, 0, 0, 0.08);
  --pdx-border: #363636;
  --pdx-border-muted: #7e7e7e;
  --pdx-text: #1b1b1b;
  --pdx-text-muted: #2f3136;
  --pdx-text-subtle: #42454c;
  --pdx-text-placeholder: #555860;
  --pdx-icon-idle: rgba(27, 27, 27, 0.22);
  --pdx-accent: #007AFF;
  --pdx-accent-dim: rgba(0, 122, 255, 0.12);
  --pdx-accent-border: rgba(0, 122, 255, 0.35);
  --pdx-on-accent: #ffffff;
  --pdx-shadow: 0 8px 24px rgba(27, 27, 27, 0.12);
}

#pdx-root[data-theme="auto"] {
  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  #pdx-root[data-theme="auto"] {
    --pdx-bg: #f3f6fd;
    --pdx-bg-elev: #ffffff;
    --pdx-bg-muted: rgba(0, 0, 0, 0.04);
    --pdx-bg-hover: rgba(0, 0, 0, 0.08);
    --pdx-border: #363636;
    --pdx-border-muted: #7e7e7e;
    --pdx-text: #1b1b1b;
    --pdx-text-muted: #2f3136;
    --pdx-text-subtle: #42454c;
    --pdx-text-placeholder: #555860;
    --pdx-icon-idle: rgba(27, 27, 27, 0.22);
    --pdx-accent: #007AFF;
    --pdx-accent-dim: rgba(0, 122, 255, 0.12);
    --pdx-accent-border: rgba(0, 122, 255, 0.35);
    --pdx-on-accent: #ffffff;
    --pdx-shadow: 0 8px 24px rgba(27, 27, 27, 0.12);
  }
}

/* Admin shell */
.pdx-admin-wrap {
  --pdx-bg: #1b1b1b;
  --pdx-bg-elev: rgba(0, 0, 0, 0.5);
  --pdx-bg-muted: #292929;
  --pdx-bg-hover: #363636;
  --pdx-border: #363636;
  --pdx-text: #ffffff;
  --pdx-text-muted: #8b8b8b;
  --pdx-text-subtle: #9a9a9a;
  --pdx-text-hint: #a3a3a3;
  --pdx-sidebar-w: 188px;
  --pdx-control-col: 52px;
  --pdx-space-1: 4px;
  --pdx-space-2: 8px;
  --pdx-space-3: 10px;
  --pdx-space-4: 14px;
  --pdx-space-5: 18px;
  --pdx-space-6: 24px;
  --pdx-content-max: none;
}

.pdx-admin-wrap[data-pdx-theme="light"] {
  --pdx-bg: #f3f6fd;
  --pdx-bg-elev: #ffffff;
  --pdx-bg-muted: rgba(0, 0, 0, 0.04);
  --pdx-bg-hover: rgba(0, 0, 0, 0.08);
  --pdx-border: #363636;
  --pdx-text: #1b1b1b;
  --pdx-text-muted: #555555;
  --pdx-text-subtle: #7e7e7e;
  --pdx-text-hint: #8b8b8b;
  --pdx-accent: #1b1b1b;
  --pdx-accent-dim: rgba(27, 27, 27, 0.08);
  --pdx-accent-border: rgba(54, 54, 54, 0.35);
  --pdx-on-accent: #ffffff;
}

/* Frontend panel sizing */
#pdx-root {
  --pdx-panel-w-sm: clamp(320px, 92vw, 380px);
  --pdx-panel-w-md: clamp(360px, 38vw, 440px);
  --pdx-panel-w-lg: clamp(400px, 32vw, 480px);
  --pdx-panel-scroll-pad: 16px 20px;
}