/* Component-level custom properties, declared at :root so they are part of the
   token surface and documented for consumers. The shipped component CSS under
   css/ re-declares these on its own selectors to size a specific instance
   (e.g. `.icon-md { --size: 24px }`), which still wins by specificity — these
   are the system defaults and the names consumers can safely override. */
:root{
  /* generic size channel — read by .icon-*, .avatar-*, .img-* */
  --size:16px;

  /* icon + avatar ramps */
  --icon-size:20px;
  --file-icon-size:24px;
  --profile-size:80px;

  /* form control geometry */
  --checkbox-size:16px;
  --checkbox-surround-size:4px;
  --radio-size:16px;
  --radio-surround-size:4px;
  --radio-padding:4px;
  --switch-height:16px;
  --switch-internal-gap:2px;
  --switch-circle-size:12px;

  /* form control accents — default to the tenant primary */
  --checkbox-color:var(--primary-color);
  --checkbox-surround-hover:rgba(var(--primary-color-rgb),0.12);
  --radio-color:var(--primary-color);
  --radio-surround-hover:rgba(var(--primary-color-rgb),0.12);
  --switch-color:var(--primary-color);
  --slider-color:var(--primary-color);
  --slider-surround-active:var(--primary-color-rgb); /* @kind color */

  /* overlay scrollbar handle */
  --os-handle-bg:rgba(0,0,0,0.44);
  --os-handle-bg-hover:rgba(0,0,0,0.55);
  --os-handle-bg-active:rgba(0,0,0,0.66);

  /* chrome geometry */
  --tail-size:24px;
  --chat-header:56px;
  --chat-panel-spacing:calc(100dvh - var(--topnav-minheight) - var(--topnav-sidebar-space) - var(--chat-header));
  --sidebar-right-width:500px;
  --min-btn-width:32px;
  --custom-gap:100px;
  --bgc-label:var(--menu-selected-color);

  /* search + datalist glyph channel */
  --search-icon-size:20px;

  /* notification centre geometry */
  --filter-notification-containers-space:24px;
  --btn-filter-container-height:36px;
  --notification-wrapper-topnav-space:0.5rem;

  /* motion channels */
  --timing:0.4s; /* @kind other */
  --transition-timing-push-offcanvas:300ms ease-in-out; /* @kind other */
}