/* Multistream Support Portal — design tokens v3 (mock v5 refinement) */
.portal-customer,
.help-layout--portal {
  --bg-primary: #050a17;
  --bg-secondary: #070d1a;
  --bg-tertiary: #0a1122;
  --bg-elevated: #0e1628;

  --surface-1: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.048);
  --surface-3: rgba(255, 255, 255, 0.072);
  --surface-primary: var(--surface-1);
  --surface-secondary: var(--surface-2);
  --surface-hover: var(--surface-3);
  --surface-card: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 100%);

  --border-subtle: rgba(255, 255, 255, 0.055);
  --border-medium: rgba(255, 255, 255, 0.085);
  --border-card: rgba(255, 255, 255, 0.07);
  --border-focus: rgba(124, 92, 255, 0.45);

  --text-primary: #E8ECF4;
  --text-secondary: #9AA3B5;
  --text-muted: #5E6878;

  --accent-blue: #587CFF;
  --accent-purple: #7C5CFF;
  --accent-violet: #9B61FF;
  --gradient-primary: linear-gradient(135deg, #587CFF 0%, #7C5CFF 55%, #9B61FF 100%);
  --gradient-nav-active: linear-gradient(90deg, rgba(124, 92, 255, 0.16) 0%, rgba(88, 124, 255, 0.06) 100%);
  --glow-purple: rgba(124, 92, 255, 0.12);
  --glow-blue: rgba(88, 124, 255, 0.08);
  --glow-violet: rgba(92, 76, 255, 0.09);

  --success: #30D09F;
  --warning: #F7AD3E;
  --danger: #FF5D73;
  --info: #4D83FF;

  --sidebar-w: 214px;
  --topbar-h: 60px;
  --content-max: 1320px;
  --nav-item-h: 44px;
  --control-h: 44px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 160ms;

  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 16px 40px rgba(0,0,0,0.16);
}

@media (prefers-reduced-motion: reduce) {
  .portal-customer *, .help-layout--portal * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}