/* Desk — neutral cool palette (ecosystem family, no product accent) */
:root {
  --bg: #0a0e17;
  --bg-primary: var(--bg);
  --bg-panel: #0f1522;
  --bg-surface: #131a28;
  --bg-elevated: #1a2235;
  --bg-inset: #080c14;

  --text-primary: var(--text);
  --text-label: var(--text-secondary);

  /* Cool-neutral borders (Folks-adjacent, desaturated — not brand blue) */
  --border-subtle: rgba(80, 105, 150, 0.10);
  --border: rgba(88, 115, 160, 0.16);
  --border-strong: rgba(104, 137, 196, 0.28);
  --panel-inset-highlight: rgba(143, 174, 224, 0.04);
  --surface-inset-highlight: rgba(143, 174, 224, 0.06);

  --accent: #ffffff;
  --desk-badge-inverse-bg: #ffffff;
  --desk-badge-inverse-fg: #0a0e17;

  --brand: #ffffff;
  --focus-ring: 0 0 0 3px rgba(143, 174, 224, 0.28);

  --radius-data: 8px;
  --radius-sm: var(--radius-data);
  --radius: 12px;
  --radius-lg: 14px;

  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 var(--panel-inset-highlight);
  --shadow-surface: 0 2px 12px rgba(0, 0, 0, 0.22), inset 0 1px 0 var(--surface-inset-highlight);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--surface-inset-highlight);
  --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.12);

  /* 8px spacing grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --desk-sidebar-width: 200px;
  --desk-staff-panel-width: 220px;
  --desk-shell-offset: var(--desk-sidebar-width);
  --desk-shell-offset-staff: calc(var(--desk-sidebar-width) + var(--desk-staff-panel-width));

  --desk-mobile-header-height: 56px;
  --desk-drawer-width: min(280px, 80vw);
  --desk-mobile-content-pad: 16px;
}

.surface,
.elevated-card {
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-surface);
}

.elevated-card:hover {
  transform: none;
  border-color: var(--border-strong);
}

.panel-title {
  color: var(--text-secondary);
}